一.计算命令computed
```html <body> <div id="app"> 姓<input type="text" v-model="first_name"> <hr> 名<input type="text" v-model="last_name"> <hr> <p>{{ first_name + " " + last_name }}</p> <p>{{ full_name_fn() }}</p> <!-- 一个变量的值依赖于多个变量的值 --> <p>{{ full_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { first_name: "", last_name: "", }, methods: { // 声明的是函数, 该函数必须手动调用 full_name_fn: function () { return this.first_name + " " + this.last_name } }, computed: { // 声明变量full_name, 该变量的值等于后方函数的返回值 // 函数中包含的所有vue变量值只要有发生变化的系统就会调用该函数 full_name: function () { return this.first_name + " " + this.last_name } } }) </script> ```
二.监听命令watch
```html <body> <div id="app"> 姓名<input type="text" v-model="full_name"> <hr> <p>{{ first_name }}</p> <hr> <p>{{ last_name }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { full_name: "", first_name: "", last_name: "", }, watch: { // wacth只是对已有的变量进行值变化的监听, 一旦发现值变化,系统自动回调监听变量后的函数 // 后方函数和前方变量只有数据变化的监听绑定关系, 没有值相关的联系 full_name: function () { arr = this.full_name.split(" "); this.first_name = arr[0]; this.last_name = arr[1]; } } }) </script> ```
三.条件渲染
```html <style> .wrap { width: 300px; } .box { width: 100px; height: 100px; } .red { background-color: red; float: left; } .orange { background-color: orange; float: right; } </style> <body> <div id="app"> <button @click="rAction">red切换</button> <button @click="oAction">orange切换</button> <div class="wrap"> <!-- v-if 值为false时, 不会被渲染 --> <!-- 了解 :key由vue控制的属性key值需要唯一标识,因为key的值就是vue对该组件在内存中建立缓存的key --> <div class="box red" v-if="r_show" :key="key" ></div> <!-- v-show 值为false时, 以display:none被渲染 --> <div class="box orange" v-show="o_show"></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { r_show: true, o_show: true }, methods: { rAction: function () { this.r_show = !this.r_show; }, oAction: function () { this.o_show = !this.o_show; } } }) </script> ```
四.循环渲染
``html <body> <div id="app"> <ul> <li>{{ ls[0] }}</li> <li>{{ ls[1] }}</li> <li>{{ ls[2] }}</li> <li>{{ ls[3] }}</li> </ul> <ul> <li v-for="(ele, index) in ls">{{ ele }} {{ index }}</li> </ul> <ul> <li v-for="(value, key, index) in dic">{{ key }} {{ value }} {{ index }}</li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: "#app", data: { ls: ['张三', '李四', '王五', '赵六', '钱七'], dic: { name: 'Bob', age: 88, gender: '男' } }, }) </script> ```
五.组件初识
```html <body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue.js"></script> <script> // 每个组件均具有自身的模板template，根组件的模板就是挂载点 new Vue({ // 根组件一定需要挂在点(否则无法渲染到页面中), 一般情况下, 根组件的template就取挂载点,不需要自定义 el: "#app", data: { msg: "信息" }, // template就是组件的html架构 // 每个组件模板只能拥有一个根标签 template: "<div><p>锻炼</p></div>" }) </script> ```
六局部组件
```html <body> <div id="app"> <abc></abc> <abc></abc> <abc></abc> </div> <hr> <div id="main"> <local-tag></local-tag> <local-tag></local-tag> </div> </body> <script src="js/vue.js"></script> <script> // 局部组件 var localTag = { // 子组件的数据具有作用域，以达到组件的复用, 每一个复用的组件具有自身独立的一套数据 data: function () { return { // 返回值是一个数据字典(一套数据) count: 0 } }, template: "<div @click='fn'>点击{{ count }}次</div>", methods: { fn: function () { this.count += 1; } } } // app根组件 new Vue({ el: "#app", // 注册 components: { 'abc': localTag } }) // main根组件 new Vue({ el: "#main", components: { // localTag 'local-tag': localTag } }) </script> ```