vue指令学习一

内容渲染指令---v-text

• 内容渲染指令，当作属性来用
• 缺点是会覆盖元素内原有内容

<div id="app">
	<p v-text="username"></p>
	<p v-text="gender"></p>
</div>
const vm=new Vue({
	el:"#app",
	data:{
    	username:"zhangsan",
    	gender:"女"
    }
})

内容渲染指令---{{}}

• {{}} 插值表达式在项目中用的最多，不会覆盖或者修改原有内容，只是一个占位符

<div id="app">
	<p>姓名：{{ username }}</p>
	<p>性别：{{ gender }}</p>
</div>
const vm =new Vue({
	el:"#app",
	data:{
    	username:"zhangsan",
    	gender:"女"
    }
})

内容渲染指令---v-html

• v-html指令可以将带标签的内容渲染成真正的HTML内容

<div id="app" v-html="info"></div>
const vm =new Vue({
	el:"#app",
	data:{
    	info:"<h4 style="color:red;font-weight:blod;">带标签内容</h4>"
    }
})

属性绑定指令---v-bind

• v-bind指令可以为元素的属性动态绑定值，可以简写成 ':'
• 使用期间，绑定内容需要动态拼接，绑定的内容需要加一个单引号''

<div id="app" >
	<input :placeholder:"'input'+tips">
</div>
const vm =new Vue({
	el:"#app",
	data:{
    	tips:"默认内容"
    }
})

事件绑定指令---v-on

• v-on指令可以为事件绑定函数，可以简写成 '@'
• 使用期间，绑定事件需要设置对应参数，绑定的事件需要加一个变量$event 表示e

<div i='app'>
	<p> count 的值为:{{ count }}</p>
	<button @:click='add(3,$event)'>+3</button>
</div>
const vm=new Vue({
	el:'#app',
	data:{
    	count:0
    },
	methods:{
    	add(n,e){
        	count+=n
        	if(this.count %2 == 0){
            	e.target.backgroundColor='red'
            }else{
            	e.target.backgroundColor='blue'
            }
        
        }
    }

})

• 事件修饰符 .prevent .stop .capture .once .self

<a herf='' @:click.prevent='show'></a>

vue指令学习二

双向绑定指令---v-model

• 只能应用到表单元素里，例如select、textarea、select

<select v-model='city'>
	<option value=''>请选择城市</option>
    <option value='1'>徐州</option>
    <option value='2'>北京</option>
    <option value='3'>上海</option>
</select>
data:{
	city:''
    }

• v-model的专属修饰符 .number(转为数值类型） .trim（过滤首位空白字符） .lazy（change时更新）

条件渲染指令 ---v-if v-show

• v-if通过创建去除元素来修改样式 初始是false，一般不展示用v-if更好
• v-show通过修改display来修改，频繁修改v-show更好

<div id="username">
        <p v-if="type==='A'">受到 v-if 控制的A语句</p>
        <p v-else-if="type==='B'">受到 v-if 控制的B语句</p>
        <p v-else="type==='C'">受到 v-if 控制的C语句</p>
        <p v-show="flag">受到 v-show 控制的语句</p>
</div>
	data:{
                flag:true,
                type:"A"
            }

循环渲染指令 --- v-for

• v-for 需要在后边加：key='id' key需要唯一值，不能是index

 			<tbody>
                <tr v-for="item in list":key='item.id'  :title="item.username">
                    <td>{{ item.index }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.username }}</td>
                </tr>
            </tbody>
		data:{
                list:[
                    {index:'1',id:'001',username:'1111'},
                    {index:'2',id:'002',username:'2222'}
                ]
            }