Vue2
Vue2
响应式数据与插值表达式
插值表达式
使用插值表达式{{}}可以显示对应单一内容:
<p> {{x}} </p> //显示变量或属性;
<p> {{x+1}} </p> //显示单行表达式;
<p> {{X?'true':'false'}} </p> //显示三元计算式;
<p> {{fun()}} </p> //显示方法返回值;
响应式数据
数据变化时,会自动更新对应方法、属性、插值表达式。
变量
方法
计算属性
- 属性
计算属性调用时作为变量调用,无需()。 - 缓存性
计算属性具有缓存性,相关的响应式数据变化时,针对多次调用只会计算一次。
侦听器
通过设置与属性同名监听方法,可以在属性变化时,做更多操作。
指令
内容指令
- v-text
- v-html
渲染指令
- v-for
for (item,name,index) in obj
for item in arr - v-if
- v-show
- v-for
- 属性指令
可用v-bind:一般属性 绑定响应式数据到html属性,如v-bind:title, 可简写为:title; - 事件指令
可用v-on:一般事件名 绑定响应式数据到html事件,如v-on:click, 可简写为@click; 表单指令
可使用v-model绑定响应式数据到表单,如:<input type="text" v-model="inputVale"/> <p v-text="inputValue"></p>
修饰符
可使用修饰符将Dom数据处理后再传到Vue变量,如:<input type="text" v-model.trim="inputValue">
则可将输入数据去空格赋值。
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body >
</body>
</html>
<script>
const app = new Vue({
el:'#app',
data(){
return {
title:'text'
}
},
});
</script>