关于Vue的基本特性,详细介绍可以参照菜鸟教程的说明。
1.计算属性
关键函数:computed & methods
计算属性用于处理一些复杂的逻辑,举例--字符串的反转--说明:
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>computed 计算后反转字符串: {{ reversedMessage1 }}</p>
<p>methods 计算后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage1: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods : {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
这里声明了一个属性 reversedMessage的属性,个人认为还是称之为函数的好。Vue强制要求的数据单向流绑定,data中的message属性发生变化,<p>标签的内容也会随之变化。
computed: 依赖于缓存,只有相关的依赖发生变化的时候才会重新渲染,避免函数的重复调用。
methods:作用与computed形同,不会依赖缓存,每次都会重新渲染,调用时记得加“()”,reversedMessage2()。
2.监听属性
关键属性: watch & v-model
通过watch属性来响应数据的变化,v-model 来及进行数据的双向绑定。个人理解,没有必要在js里面写watch的部分进行监听,除非你想详细的了解数据的变化过程。
3.样式绑定
关键指令: v-bind: v-bind:class; v-bind:style
关于样式的绑定具体实现可以参照:菜鸟教程的vue绑定样式总结
var myvue = new Vue({
el:'#mydiv',
data:{
gettext: '',
getclass1:true,
getclass2:false,
getp_style:true,
// 这里的key是类名,value是boolean值。下面的vue+class的value才是类名,key是自定义的类的实例化对象。注意区分
styleobj:{
class1: true,
class2: true,
'p-style': false // 这里也需要将带有连字符的样式用引号括起来
},
getdiv_style:{ // 定义样式调用条件
number1: true,
number2: false
},
// 下面几个其实可以理解为 伪类实例化
vueclass1: 'class1',
vueclass2: 'class2',
vuedivstyle: 'div-style',
vuepstyle: 'p-style',
// 动态改变字体大小
size: 15,
fontstyle:{ // 绑定样式对象
fontSize: 25+'px',
fontWeight: 'bold'
},
colors: ['red','blue','cyan','pink','orange','yellow','black','white','purple'], // 动态改变颜色需要的颜色数组
colorstyle: {
color: 'red',
backgroundColor : 'blue',
borderRadius: '20px'
},
sizestyle:{
width: '300px',
height: '100px'
},
radiussize: 10
},
watch:{
size:function(){
this.fontstyle.fontSize = this.size+'px'
},
gettext:function(str){ // 适用于只要填入内容就改变样式
str ? this.getdiv_style.number1 = false : this.getdiv_style.number1 = true
}
},
methods:{
changecolor:function(){ // 改变颜色
this.colorstyle.backgroundColor = this.colors[Math.floor(Math.random()*this.colors.length)]
this.colorstyle.color = this.colors[Math.floor(Math.random()*this.colors.length)]
},
changesize:function(){ // 改变尺寸
this.sizestyle.width = parseInt(this.sizestyle.width)+50+'px'
this.sizestyle.height = parseInt(this.sizestyle.height)+20+'px'
}
},
computed:{
judegeuse:function(){ // 判断是否使用某个/些类
return {
class1: false,
class3: true,
'div-style': this.getdiv_style.number1&&!this.getdiv_style.number2 // 这里也需要将带有连字符的样式用引号括起来
}
}
}
})
4.条件渲染与循环渲染
关键指令:v-if; v-else; v-else-if; v-for
Vue为了提高渲染的性能或者效率,会复用已渲染的标签。需要注意:
- 在使用<input>标签时,建议添加key属性以区别元素
<div class="" v-if="isSeen">
<input type="text" name="" value="" placeholder="enter a" key="a">
</div>
<div class="" v-else>
<input type="text" name="" value="" placeholder="enter b" key="b">
</div>
<div class="" @click="isSeen=!isSeen">
toggle
</div>
- v-for的优先级高于v-if,需要全部渲染时,v-if在外层
<div v-if="{{a}}"><div v-for="item in list"></div></div>
5.事件绑定
关键指令: v-on,简写为@;例如v-on:click 等价于 @click,例子如上述代码。
关于Vue组件的特性--总结深化:
1.指令 -- 用来操作DOM
2.组件 -- html css js的聚合体
为什么要使用组件:
- 组件化思想:将项目中的一部分,复用于多处;加快项目进程;项目的复用性;
- 组件化条件:组件化的部分必须是一个完整的,称之为组件;
- 聚合体:index.htm css js等文件分开的话,复用会相当麻烦;将这些部分放在一起形成单文件组件 ***.vue;
- 注册方法:全局注册&局部注册,作用域类似于全局变量与局部变量的关系;
Vue.components('组件名',{
template:'内容'
})
//局部注册:在组件中用components的配置项目来表示(只能在注册范围内用)
new Vue({
el:'#app',
components:{内容}
})
自定义全局组件:所有实例中均可使用
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
自定义局部组件:仅在实例选项中使用
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
template的使用:
1.实例范围内使用
template中的内容被当做一个整体了,并且template标签是不会解析到html结构中;
2. 实例范围外使用
实例范围外template标签是不会被直接解析,组件中想要这样使用,需要vue的单文件组件;