1、在vue的实例化对象中对vue的data进行操作,建议用vm.$data进行操作, vm.$watch('字段', function(newValue, oldValue){})可以对字段进行监听,但是注意,该方法对路径引用的数组或对象来说,newValue与oldValue两个值是一样的,注意:在$watch里的函数尽可能不要用箭头函数,因为这样容易获取不到上下文
let app = new Vue({ el: '#container', data: { name: 'are you ok???', list: ['AAA', 'BBB', 'CCC'] } }); app.$watch('list', function() { console.log(arguments); }); //输出两个 ['AAA', 'BBB', 'CCC','ddd'] app.$data.list.push('ddd'); app.$watch('name', function() { console.log(arguments); }); //输出 'haha', 'are you ok???' app.$data.name='haha';
2、vue的生命周期函数
let app = new Vue({ el: '#container', data: { name: 'this is title', list: ['aaa', 'bbb'] }, beforeCreate() { console.log(this, 'beforeCreate'); }, created() { console.log(this, 'created') }, beforeMount() { console.log(this, 'beforeMount'); }, mounted() { console.log(this, 'mounted'); }, beforeUpdate() { console.log(this, 'beforeUpdate'); }, updated() { console.log(this, 'updated'); }, beforeDestroy() { console.log(this, 'beforeDestroy'); }, destroyed() { console.log(this, 'destroyed'); } }); setTimeout(() => { app.$data.name='check title'; }, 2000); setTimeout(() => { app.$destroy(); }, 5000);
3、vue的三种插值方法
<body> <div id="container"> <h1>{{name}}</h1> <h2>{{age >= 30? '年龄大于等于30': '小于30岁'}}</h2> <h3>{{msg.split('').reverse().join('')}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el: '#container', data: { name: 'title', age: 30, msg: 'good' } }); </script> </body>
注意:这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,比如定义变量,用if语句等,是不生效的。
4、vue指令
v-once: 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过
v-pre: 跳过这个元素和它的子元素的编译过程
<body> <div id="container"> <h3 v-once>{{msg}}}</h3> <h3 v-pre>{{msg}}</h3> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el: '#container', data: { msg: '<b style="color: red">this is test</b>' } }); </script>
v-text:更新元素的 textContent
。如果要更新部分的 textContent
,相当于 {{ Mustache }}
插值。
v-html:更新元素的 innerHTML
。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html
组合模板,需考虑是否通过使用组件来替代。
<body> <div id="container"> <h3 v-text="msg"></h3> <h3 v-html="msg"></h3> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el: '#container', data: { msg: '<b style="color: red">this is test</b>' } }); </script> </body>
输出内容:
v-model:与表单指定的字段进行双向绑定,并且值随着字段的变化而变化
- .lazy - 取代
input
监听change
事件 - .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
<body> <div id="container"> <input type="text" v-model.trim="msg"> <!--添加trim后,可以删除两边的空格--> <input type="text" v-model.number="msg"> <!--在data中把msg转成number类型的数据--> <input type="text" v-model.lazy="msg"> <!--添加lazy后的这个属性,相当于是change事件--> <h3>{{msg}}</h3> <input type="button" value="点击" @click="getVal"> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el: '#container', data: { msg: '' }, methods: { getVal() { console.log(`(${this.$data.msg})`); console.log(typeof this.$data.msg); } } }); </script> </body>
与表单组件的绑定,参看vue官方文档
v-show: 根据表达式之真假值,切换元素的 display
CSS 属性 即为false时,display: none;
v-if: 当所绑定的值为true时会被渲染,否则会被销毁,不出现在元素中(注意v-for 与v-if不同时使用,因为v-for的优先级比v-if高,会导致各种嵌套)一般配合v-else, v-else-if 配合使用
<body> <div id="container"> <h3 v-show="show">{{msg}}</h3> <!--如果是false的时候,那么会在对应的dom元素上添加style="display: none;"--> <h4 v-if="ifShow > 5">{{msg}}</h4> <!--如果是false的时候,那么在dom元素上就不会渲染这个元素,即不存在--> <h4 v-else-if="ifShow == 5">{{msg}}--haha</h4> <h4 v-else>{{msg}}--this is true</h4> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el: '#container', data: { msg: 'this is message', show: false, ifShow: 3 } }); </script> </body>
v-for: 参数可以是Array | Object | number | string 实现循环渲染
<body> <div id="container"> <ul><li v-for="(v,k) of msg">{{v}}----{{k}}</li></ul> <ul><li v-for="(v,k) in msg">{{v}}----{{k}}</li></ul> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el: '#container', data: { msg: 'good', } }); </script> </body>
v-on: 绑定事件
.stop
- 调用event.stopPropagation()
。.prevent
- 调用event.preventDefault()
。.capture
- 添加事件侦听器时使用 capture 模式。.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。.native
- 监听组件根元素的原生事件。.once
- 只触发一次回调。.left
- (2.2.0) 只当点击鼠标左键时触发。.right
- (2.2.0) 只当点击鼠标右键时触发。.middle
- (2.2.0) 只当点击鼠标中键时触发。.passive
- (2.3.0) 以{ passive: true }
模式添加侦听器
具体参看vue官方文档
<!-- 方法处理器 --> <button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) 相当于会把event转化成data里对应的event字段--> <button @[event]="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 --> <form @submit.prevent></form> <!-- 串联修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
v-bind: 绑定属性
<!-- 绑定一个属性 --> <img v-bind:src="imageSrc"> <!-- 动态特性名 (2.6.0+) --> <button v-bind:[key]="value"></button> <!-- 缩写 --> <img :src="imageSrc"> <!-- 动态特性名缩写 (2.6.0+) --> <button :[key]="value"></button> <!-- 内联字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
v-cloak: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>