Vue复习1.0内容:Vue基础语法、计算属性、概念、指令
Vue复习2.0已发布,文章涉及完整代码已全部上传至GitHub:Vue复习2.0——组件化开发详解
@
目录
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来
View层(视图层):
在前端开发中,通常就是DOM层。主要的作用是给用户展示各种信息,即看到的结构、布局和外观(UI)。
Model层(数据层):
代表真是内容的数据,数据可能是固定的,但更多的是来自服务器请求下来的数据。
VueModel层(视图模型层):
视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中;另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
<body> <div id="app"> {{message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body>
<div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> <script> const app = new Vue({ el: '#app', data: { message: '你好啊', movies: ['星际穿越', '大话西游', '少年派', '盗梦空间'] } }) </script>
正如页面直接用{{data里的值,eg:count}}
,body里的标签要用vue中data的值也直接用
<h3>当前值为:{{count}}</h3> <button @click="count++">+</button>
但是vue中method等要用到data的数据就得加this,因为methods里面本身没有data里的数据
methods:{ add:function(){ this.count++ } }
PS:vue中的methods不可以使用箭头函数,因为this指向的不是vue实例,使用箭头函数打印this,发现是undefined
methods: { test: () => { console.log(this); // undefined } }
该指令后面往往会跟上一个string类型并将string里的html解析、渲染
<h3 v-html="message"></h3> <script> const app = new Vue({ el: '#app', data: { message: '<span>你好</span> ' } }) </script> //span标签可被v-html解析
元素和组件只渲染一次,不会随着数据的改变而改变
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] { display: none; } <div id="app"> <h2>{{message}}</h2> <!-- 未使用v-cloak --> <h2 v-cloak>{{message}}</h2> </div> <script> setTimeout(function () { const app = new Vue({ el: '#app', data: { message: '你好啊' } }) }, 1000) </script>
(语法糖 :)
<img v-bind:src="imgURL" alt="">
=== <img :src="imgURL" alt="">
<style> .active { color: red; } .small { font-size: 15px; } </style> </head> <body> <div id="app"> <!-- 法一:通过判断绑定类且与原来的类不冲突 --> <!--<h2 v-bind:class="{类名1: true, 类名2: false}">{{message}}</h2>--> <h2 class="small" :class="{active: isActive}">测试文本1</h2> <!-- 属性加不加引号都可以 --> <h2 :class="{'active':isActive}">测试文本2</h2> <!-- 法二: 动态绑定放在methods里 --> <h2 :class="getClasses()">测试文本3</h2> <!-- 法三:动态绑定在返回对象的计算属性 --> <h2 :class="getClass">测试文本4</h2> <p></p> <button :click="btnClick">按钮</button> </div> <script> const app = new Vue({ el: '#app', data: { isActive: false, active: 'active', }, methods: { btnClick: function () { this.isActive = !this.isActive; }, getClasses: function () { return { active: this.isActive }; //以对象形式返回active: this.isActive,即:class="getClasses()变为 :class="{'active':isActive}" }, }, computed: { getClass: function () { return { active: this.isActive, }; }, }, }); </script> </body>
点击按钮前后:
<style> .active { color: red; } .small { font-size: 15px; } </style> <div id="app"> <!-- 直接通过数组绑定若干个类名 --> <h2 :class="[active, small]">测试文本1</h2> <!-- 数组与三元运算符 --> <h2 :class="[isActive?'active':'']">测试文本3</h2> <!-- 通过方法绑定 --> <h2 class="small" :class="getClasses()">测试文本3</h2> <p></p> <button v-on:click="btnClick">按钮</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { active: 'active', small: ' small', isActive: false, }, methods: { btnClick: function () { this.isActive = !this.isActive; }, getClasses: function () { return [this.active]; //以数组形式返回[this.active]([active]),即 :class="getClasses()等价变化为:class=[active] }, }, }); </script>
点击按钮前后:
.once : 只触发一次回调。
.stop :调用 event.stopPropagation()。
.prevent :调用 event.preventDefault()。
<!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 --> <form @submit.prevent></form>
@click="btnClick()
v-on方法的小括号可写可不写,但若写方法时省略了小括号但方法本身需要一个参数, Vue会默认将浏览器生产的event事件对象作为参数
传入到方法
方法定义时, 若同时需要event对象又需要其他参数,需手动的获取到浏览器参数的event对象: $event
<div id = "demo"> <button @click = "btnClick('abc',$event)">按钮</button> </div> const demo = new Vue({ el:'#demo', methods:{ btnClick:function(a,event){ console.log(a,event); } } })
当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。
<h2 v-if="score>=90">优秀</h2> <h2 v-else-if="score>=80">良好</h2> <h2 v-else-if="score>=60">及格</h2> <h2 v-else>不及格</h2>
推荐加个
:key=
,key的作用主要是为了高效的更新虚拟DOM
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
<li v-for="(item,index) in names">{{item}}-{{index}}</li> v-for="(value, name, index) in object"
原理:
包含两个操作:1.v-bind绑定一个value属性;2.v-on指令给当前元素绑定input事件,进行值的更新
<input type="text" :value="message" @input="message = $event.target.value">
v-model还可以绑定单选框、复选框
<h2>您的爱好是: {{hobbies}}</h2> <label v-for="item in originHobbies" :for="item"> <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}} </label> </div> <script> const app = new Vue({ el: '#app', data: { hobbies: [], // 多选框, originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球'] } }) </script>
v-model的修饰符:
lazy修饰符:
默认情况下,v-model默认在input事件中会对输入框的数据进行同步,但lazy修饰符可以转为在自定义的事件之后再进行同步。如:失去焦点或者按回车键时更新
<input v-model.lazy="msg">
number修饰符:
默认情况下,输入框将输入的数据当做字符串类型进行处理,number修饰符可以让输入框的内容自动转成数字类型
<input type="number" v-model.number="age">
<h2>{{age}} {{typeof age}}</h2>
trim修饰符:
自动过滤用户输入的首尾空白字符
<input type="text" v-model.trim = "mes">
注意:计算属性不用加(),要有return值
<div id="example"> <p> {{ message }}</p> <p>{{reversedMessage }}</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
计算属性缓存 vs 方法
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
computed: { now: function () { return Date.now() } }
计算属性不会更新,但相比之下,每当触发重新渲染时,调用方法将总会再次执行函数
需要计算属性缓存的原因:
(官网解释)假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter。如果你不希望有缓存,请用方法来替代。
Vue.js文档
API——Vue.js