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>