1.Mustache(双大括号):
2.v-once:该指令后面不需要跟任何表达式(v-for后面接表达式),该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。
3.v-html:v-html会将数据当html标签解析后输出。
4.v-text:<h2 v-text="message"></h2>等效于<h2>{{message}}</h2>,但相比于Mustache,它不够灵活。
5.v-pre:如<h3 v-pre>{{message}}</h3>,标签显示结果就是它标签本身的内容,即{{message}}。
6.v-cloak:解决屏幕闪动的好方法。
7.v-bind:基本属性绑定和动态绑定(对象或数组),将对应的图片或地址等数据放入data中,使用v-bind将数据引用到对应的标签中,如<img v-bind:src="imgUrl" />,其中data数据如下:
v-bind语法糖(简写方式):<img v-bind:src="imgUrl" />可写为<img :src="imgUrl" />。
8.计算属性:其本质就是属性,包含setter和getter,下面是两种操作实例:
<body>标签的内容:
对应vue代码:
一般为只读属性,所以可以省略set,写成如下形式:
9.v-on(缩写:@):绑定事件监听器。一些处理事件的修饰符(可混合使用):
(1).stop阻止冒泡事件的发生
(2).prevent阻止默认事件的发生,如不用.prevent,下面标签的submit指令会调用方法后直接提交服务器 ,即控制台显示的数据会闪过
(3).{keycode|keyAlias}特定键盘键触发回调
(4).once只触发一次回调
10.v-show:判断属性。
与v-if区别:v-if在条件为false时,包含v-if指令的元素不会出现在dom中;v-show在条件为false时,只是给元素添加一个行内样式:display:none,元素仍然在dom里面;
注意:当需要在显示与隐藏之间切换频率较高的时候,应该使用v-show(性能更高),当次数较少时通常使用v-if。
11.v-for:循环遍历操作。语法:
(1)遍历数组:v-for="(m,index) in movies" //m是新定义的变量名称,index是对应数组的下标,movies是已有的数组名。Index可省略。
(2)遍历对象:<li v-for=”(value,key) in moive”>{{item}}</li> //如果只获取一个值,那么取得的值是value,key可以省略。
12.v-model:实现双向绑定(等同于v-on和v-bind一起使用,实现实时显示)。
双向绑定的使用案例:
<body>
<div id="app">
<!-- 基础案例 -->
<!-- <input type="text" v-model="message"/>{{message}} -->
<!-- 当界面产生一个事件,浏览器会生成一个event对象,内部就包含当前输入的值 -->
<input type="text" :value="message" @input="change" /><br />
<h2>文本框输入内容:{{message}}</h2>
<br />
<!-- 单选框 -->
<span>
<label for="male">
<input type="radio" id="male" value="男" v-model="sex" />男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex" />女
</label>
<h2>你选择的性别是:{{sex}}</h2>
</span>
<!-- 单击选择 -->
<label for="agree">
<input type="checkbox" id="agree" v-model="info" /><span title="点击同意进入下一步">同意协议 </span>
<button :disabled="!info" @click="notice()">next</button>
<br />
<h2 v-if="info==true">你已经同意相关协议</h2>
</label>
<br />
<!-- 复选框 -->
<label>
<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
<input type="checkbox" value="篮球" v-model="hobbies" />篮球
<input type="checkbox" value="足球" v-model="hobbies" />足球
<input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
<h2>你的爱好是:{{hobbies}}</h2>
</label>
<!-- v-model:select 分为复选框和单选框 -->
<!-- 单选框 -->
<select name="abc" v-model="fruit">
<option value="西瓜">西瓜</option>
<option value="橘子">橘子</option>
<option value="香蕉">香蕉</option>
<option value="哈密瓜">哈密瓜</option>
</select>
<h2>你选择的水果是:{{fruit}}</h2>
<!-- 多选框 -->
<select multiple="multiple" name="xyZ" v-model="stars" size="5">
<option disabled="disabled">ctrl+单击可复选</option>
<option value="刘德华">刘德华</option>
<option value="梁朝伟">梁朝伟</option>
<option value="黎明">黎明</option>
<option value="库里">库里</option>
</select>
<h2>你选择的明星是:{{stars}}</h2>
<!-- 值绑定 (动态绑定v-model)-->
<label v-for="item in orginHobbies">
<input type="checkbox" :value="item" />{{item}}
</label>
<!-- 修饰符 -->
<!-- 1.修饰符:lazy 敲回车时进行绑定-->
<div>
<input type="text" v-model.lazy="message" />
<h2>{{message}}</h2>
</div>
<!-- 2.修饰符:number转换数据类型 -->
<div>
<input type="number" v-model.lazy.number="numberBind" />
<h2>{{numberBind}}-{{typeof numberBind}}</h2>
</div>
<!-- 3.修饰符:trim除左右两边空格 -->
<div>
<input type="text" v-model.lazy="name" />
<h2>你输入的名字是:{{name}}</h2>
</div>
</div>
<script src="../js/v2.6.10/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'hello!!',
sex: '男',
info: false,
orginHobbies: ['橄榄球', '高尔夫球', '乒乓球'],
hobbies: [],
fruit: '橘子',
stars: [],
numberBind: '',
name: ''
},
methods: {
change(event) {
this.message = event.target.value;
},
notice() {
alert('感谢你同意协议');
}
}
})
</script>
</body>