1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Vue基础1</title> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 </head> 10 <style> 11 .textColor { 12 color: red; 13 } 14 .errorClass { 15 font-size: 18px; 16 } 17 </style> 18 <body> 19 <!-- v-bind为指令：将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致 --> 20 <div id="app" :title="message"> 21 <!-- day01 --> 22 <div>{{message}}</div> 23 <!-- v-model 指令，实现表单输入和应用状态之间的双向绑定 --> 24 <input v-model="message"> 25 <div v-if="seen">条件与循环,能看到我的条件是seen为true哦</div> 26 <!-- v-for指令 --> 27 <p>你想成为什么</p> 28 <ul> 29 <li v-for="dream in dreams">{{dream.text}}</li> 30 </ul> 31 <div> 32 <button @click="reverseDream">v-on添加事件监听</button> 33 </div> 34 <ol> 35 <todo-item v-for="dream in dreams" :dream="dream" :key="dream.id"></todo-item> 36 </ol> 37 38 <!-- day02 --> 39 <!-- v-once指令插入的值不会随着实例数据的改变而更新 --> 40 <div v-once>{{message}}</div> 41 <!-- 指令 (Directives) 是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 --> 42 43 <!-- 修饰符：以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定 --> 44 45 <!-- v-bind的缩写“:”，v-on的缩写“@” --> 46 47 <!-- 计算属性和侦听器： 1、对于任何复杂的逻辑，你都应当使用计算属性computed。 48 2、像绑定普通属性一样在模板中绑定计算属性 --> 49 <!-- 计算属性 vs 方法：两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。 50 这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。每当触发重新渲染时，调用方法将总会再次执行函数。 --> 51 <div>我是计算属性： {{ reversedMessage }}</div> 52 <div>我是方法： {{ reversedMessageFunc() }}</div> 53 <!-- 计算属性 vs 侦听属性 1、计算属性默认只有getter,必要时可以提供一个setter函数 54 2、当需要在数据变化时执行异步或开销较大的操作时，选用侦听属性 55 3、使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的--> 56 <div>{{ fullName }}</div> 57 58 <!-- class 与 style 绑定，v-bind:class 也可以与普通的class属性共存, 与class="{{ className }}" 方式不能共存 --> 59 <div v-bind:class="{ textColor: isActive }">isActive 的值为true的时候我是红色的</div> 60 <!-- 常用并且很强大的模式：在v-bind:class绑定一个返回对象的计算属性 --> 61 <div v-bind:class="classObject">我的样式由计算属性决定的</div> 62 <!-- 可以给 v-bind:class 传入一个数组，数组中的内容在class中定义，数组中的每个元素也可以使用三元表达式计算要应用的class --> 63 <div v-bind:class="[activeClass]">我是以数组形式传进来的哦</div> 64 <!-- 在数组语法中也可以使用对象语法 --> 65 <div v-bind:class="[{ textColor: isActive }, errorClass]">数组语法与对象语法混用</div> 66 67 <!-- 绑定内联样式：v-bind:style --> 68 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</div> 69 <div v-bind:style="styleObject">以对象形式传入v-bind:style</div> 70 <!-- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上 --> 71 <!-- 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值 --> 72 <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> 73 </div> 74 75 <script> 76 // day01 77 // 一个组件本质上是一个拥有预定义选项的一个 Vue 实例【注：组件要定义在创建实例Vue之前】，props完成父子组件间的通信 78 // 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 79 Vue.component("todo-item",{ 80 props: ["dream"], 81 template: "<li>{{dream.text}}</li>" 82 }) 83 // 声明式渲染,数据与DOM进行了关联，所有的东西都是响应式的。 84 var data = { 85 message: "Hello Vue!", 86 seen: true, 87 dreams: [ 88 {id: "0", text: "老师"}, 89 {id: "1", text: "画家"}, 90 {id: "2", text: "程序员"} 91 ], 92 firstName: "foo", 93 lastName: "bar", 94 // reversedMessage: '', 95 isActive: true, 96 error: false, 97 activeClass: 'textColor', 98 errorClass: 'errorClass', 99 activeColor: 'blue', 100 fontSize: 30, 101 styleObject: { 102 color: 'blue', 103 // 注意驼峰式命名 104 fontSize: '30px' 105 } 106 } 107 // Object.freeze(data); // 阻止修改现有的属性，也意味着响应系统无法再追踪变化。 108 var app = new Vue({ 109 el: "#app", 110 // *** 只有当实例被创建时data中存在的属性才是响应式的 ***，若一开始为空或者不存在，仅设置一些初始值就可以。 111 // data: { 112 // message: "Hello Vue!", 113 // seen: true, 114 // dreams: [ 115 // {id: "0", text: "老师"}, 116 // {id: "1", text: "画家"}, 117 // {id: "2", text: "程序员"} 118 // ] 119 // }, 120 data: data, 121 methods: { 122 // 此方法只关注逻辑即可，并没有触及DOM 123 reverseDream: function() { 124 this.dreams.reverse(); 125 }, 126 reversedMessageFunc: function () { 127 return this.message.split('').reverse().join('') 128 } 129 }, 130 // day02 实例生命周期钩子 131 // 创建实例前执行 132 beforeCreate() { 133 console.log("-- beforeCreate --", this.$el); // undefined 134 console.log("-- beforeCreate --", this.$data); // undefined 135 }, 136 // 实例创建完成后执行 137 created() { 138 console.log("-- created --", this.$el); // undefined 139 console.log("-- created --", this.$data); // Object 140 }, 141 // $el关联到DOM，但还没有渲染数据 142 beforeMount() { 143 console.log("-- beforeMount --", this.$el); // DOM + 表达式无数据 eg: <div>{{message}}</div> 144 console.log("-- beforeMount --", this.$data); // Object 145 }, 146 // 渲染数据完成 147 mounted() { 148 console.log("-- mounted --", this.$el); // DOM + 表达式被渲染为数据 eg: <div>我是message的值</div> 149 console.log("-- mounted --", this.$data); // Object 150 }, 151 // 更新之前视图并未渲染？？？为什么打印出来的$el中的HTML为修改之后的值？？？ 152 beforeUpdate() { 153 console.log("-- beforeUpdate --", this.$el); // DOM + 表达式被渲染为数据 eg: <div>我是更改之后的值</div> 154 console.log("-- beforeUpdate --", this.$data); // Object 155 }, 156 // 更新完成视图已更新 157 updated() { 158 console.log("-- updated --", this.$el); // DOM + 表达式被渲染为数据 eg: <div>我是更改之后的值</div> 159 console.log("-- updated --", this.$data); // Object 160 }, 161 // 实例与视图解绑，修改实例，视图不会再响应更新 162 destroyed() { 163 164 }, 165 computed: { 166 // 计算属性的 getter 167 reversedMessage: function () { 168 // `this` 指向 vm 实例 169 return this.message.split('').reverse().join('') 170 }, 171 classObject: function () { 172 return { 173 'textColor': this.isActive && !this.error 174 } 175 }, 176 fullName: { 177 // getter 178 get: function () { 179 return this.firstName + ' ' + this.lastName 180 }, 181 // setter 182 set: function (newValue) { 183 var names = newValue.split(' ') 184 this.firstName = names[0] 185 this.lastName = names[names.length - 1] 186 } 187 } 188 } 189 }); 190 </script> 191 </body> 192 </html>
源码位置： https://github.com/xchener/chenxuexue/tree/dev （适合vue小白,节约敲码时间）