mutache
jsx: javascript + xml
- 可以让我们在dom结构中输写javascript
{{ msg }}
是 this.msg 简写
this.$data.msg -> this.msg -> msg
mustache语法糖对数据类型的支持(js语法支持);
数据类型:
-
第一种划分:
- 基础数据类型:number、string 、boolean;
- 复杂数据类型:object、(array、function);
- 特殊数据类型:null、undefined;
-
第二种划分:
- 初始数据类型:number、string、boolean、null、undefined;
- 引用数据类型:object(array、function); -
mustache支持是支持js的数据类型的!
-
console.log 和 alert 在mustache语法是不支持的!
-
mustache绑定dom属性;
指令(绑定在dom属性上);
- v-html:
- 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML ));
- v-text:
- 可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML );
条件渲染的指令
- 可以将一个数据展示在一个dom的内容中( 相当于使用了 innerHTML );
- v-show:
- 可以控制一个dom的显示隐藏( 这个指令操作的是dom的display属性 );
- v-if:
- 可以控制一个dom的存在与否( 创建 和 销毁 );
- v-else
- v-else-if
- v-for:
- 数组 v-for = " (item,index) in arr " ; item是arr中每一个元素;
- 对象 v-for = "(item,key,index) in obj " ; item是obj的属性值;
- json类型数据;
- 嵌套类型数据;
key: 给没一个循环的列表添加一个唯一的标识; 使用指令 v-bind 来绑定 key; <div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>; 如果有id,那么我们就使用id,如果没有,我们才会选择index;
- v-bind:
- 单项数据绑定: 将一个数据绑定在一个dom的属性上
<body>
<div id="app">
<p v-html = "h"></p>
<p v-text = "msg"></p>
<p v-text = " flag && 1 || 2 " > </p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue.js',
h: '<h3> hello Vue.js </h3>',
flag: true
}
})
</script>
- 发现dom元素直接有了一个内容这种属性绑定就是为了操作dom;
- 这种属性绑定的形式就是为了操作dom,我们给这种属性起了一个好听的名字
- Vue 1.0 叫它 属性指令( 借鉴Angular来的 )
- Vue 2.0 统称为 ‘指令’
指令是用一个 v-xxx 表示
指令是用来操作dom
-
Vue中不允许直接操作dom;
-
mustache语法 — 属性写法 的属性值是直接写数据的,不需要使用 {{ }} ;
v-if 与 v-show (重要!!!);
- 区别:
- v-if 操作的是dom元素( 组件 ) 的创建或是销毁;
- v-show 操作的是dom元素的display属性;
- v-if可以有多种使用形式: 单路分支, 多路分支, 双路分支;
- v-show 只能写一个单路形式;
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
因此,如果需要非常频繁地切换,则使用 v-show 较好;
如果在运行时条件很少改变,则使用 v-if 较好;
vue中如何给dom添加类名;
-
直接在dom上绑定类名;
-
vue中类名绑定 - 对象形式;
-
目的:
-
dom身上属性class 要和 数据绑定 ;
- 解决:v-bind;
- 数据中key,我们起的和绑定的对象中的key一样,但是你得知道这两个东西不一样;
<p :class = "{ size,bg_color }"></p>
// size是自定义的属性, 它的属性值是undefined, 相当于是false
<p :class = "{ size: true, bg_color: true }"></p>
// size也是自定义属性,他的属性是true,那么就会加上去
<p :class = "{ [s]: true, [bg_color]: true }"></p>
// 格式: v-bind:class = "{ 属性: boolean }"
// 格式: v-bind:class = "{ [data]: boolean }"
-
vue中类名绑定的形式 - 数组的形式 【 推荐 】;
- 格式: v-bind:class = “[ 数据 ]”
-
类名绑定不会覆盖原先的类名;
-
为什么要绑定类名;
指令是用来操作dom;
目的: 为了将来通过数据来操作类名,类名操作dom;
样式的绑定:
- v-bind: style = “”;
- 对象的形式;
<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p>
- 数组的形式;
<p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p>
事件(v-on);
Q: javascript事件添加有几种形式;
A:
-
事件绑定;
dom.onclick = function () {};
dom: 事件源;
on: 绑定事件的形式;
click: 事件类型;
function(){} 事件处理函数; -
事件监听 : addeventListener ;
-
直接在标签中绑定事件;
<div onclick = "事件名称"></div>
// vue采用了第三种,也是通过属性的形式绑定在dom身上
<div v-on:click = "事件名称"></div>
<div @click = "事件名称"></div>
Q:如果事件处理程序中有三个参数,第三个参数才是事件对象e,如何实现?
- (我们发现事件处理程序中的第三个参数 e 不在是事件对象了,而是一个undefined);
A:在函数执行时,传入一个实际参数 $event 来代表事件对象;
双向数据绑定(v-model);
- 双向数据绑定;
- 默认绑定value值;
- v-model应用于表单元素;
<body>
<div id="app">
<input type="text" v-model = "msg">
<p> {{ msg }} </p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello Vue.js'
}
})
</script>
实际应用:
业务: 点击一个按钮,添加一条新的数据放在列表数据中
Q:
- 下标是不能检测变动的,但是我们现在看到了它检测到了;
- 如果我们通过 length = 0 , 来清空一个数组,那么vue检测不到这个变动 ;
A: 使用splice;
Q: 我们直接修改一个数组下的一个数据时,发现下标不能检测变动了;
A : 使用 Vue.set / this.$set;