官网:https://cn.vuejs.org/v2/guide/installation.html
开发前准备
下载
1、官网下载
或者:
概念
- MVVM:Model View ViewModel
- 响应式绑定数据:
数据绑定后,数据更新会同步更新对应html属性。
Object.freeze(data);可阻止修改现有的属性,也意味着响应系统无法再追踪变化。
$
Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
语法
生命周期
new Vue():
- beforeCreate 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
- created 在实例创建完成后被立即调用。
在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
然而,挂载阶段还没开始,$el 属性目前不可见。 - beforeMount 在挂载开始之前被调用:相关的渲染函数首次被调用
- mounted el 被新创建的 vm.$el 替换, 挂在成功
- beforeUpdate 数据更新前调用
- updated 组件 DOM 已经更新, 组件更新完毕
- beforeDestroy 销毁前
- destroyed 销毁后
插值:
mustache语法(双大括号)
{{变量或者简单的表达式}}
<div id="app">{{message}}
<h2>{{message+' '+1}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: "3天学完vue",
}
});
</script>
v-once
数据绑定后,html属性不会随数据更新而更新。
<h2 v-once>{{message}}</h2>
Object.freeze(data);也可阻止更新html属性,也意味着响应系统无法再追踪变化。
v-html
将对数据解析成html节点
<h2 v-html="url"></h2>
<script>
const app = new Vue({
el: '#app',
data: {
url: '<a href="http://www.baidu.com">百度一下</a>',
}
});
</script>
解析后:
<h2><a href="http://www.baidu.com">百度一下</a></h2>
v-text
<h4 v-text="message"></h4>
等价于
<h2>{{message}}</h2>
但{{}}用的更多,因为更灵活
v-pre
不解析节点的mustache
<h4 v-pre>{{message}}</h4>
会把{{message}}作为文本渲染
v-cloak
加载vue代码前存在,加载后不存在。当网页卡顿vue代码未加载前,页面可能会显示没有被vue处理的内容。使用v-cloak可解决这一问题
<style>
[v-cloak]{display: none;}
</style>
<h4 v-cloak>{{message}}</h4>
v-bind
<div id="bind">
<h2>v-bind:</h2>
<img v-bind:src="imgSrc"/>
</div>
<script>
const bind = new Vue({
el:"#bind",
data:{
imgSrc:"file:///D:/project/vueTest1/static/img/cat.png"
}
});
</script>
- 语法糖写法
<img :src="imgSrc"/>
<h4 :class="{类名:布尔值,类名:布尔值}"></h4>
<h4 :class="getClasses()"></h4>
methods:{
getClasses:function(){
return "";
}
},
<h4 :class="['类1','类2']"></h4>
<h4 :class="[类1(变量名),类2]"></h4>
v-for
<div id="list">
v-for:
<ul>
<li v-for="(point,key) in pointList">
{{point}}
</li>
</ul>
</div>
<script>
const list = new Vue({
el: '#list',
data: {
pointList: ['列表', '画画玩家可'],
}
});
list.pointList.push("还哈");
</script>
- 实例:点击列表的item,item变色,其他item颜色恢复
<style>
.red {
color: red;
}
</style>
<div id="list">
v-for:
<ul>
<li v-for="(point, i) in pointList" @click="changeColor(i)"
:style="{color:i===clickIndex?'#FF0000':''}">
<!-- :class="[i===clickIndex?'red':'']"> -->
<!-- :class="{red:i===clickIndex}"> -->
{{point}}{{i}}
</li>
</ul>
</div>
<script>
const list = new Vue({
el: '#list',
data: {
pointList: ['列表', '画画玩家可'],
clickIndex:-1,
},
methods:{
changeColor:function(i){
this.clickIndex=i;
}
}
});
list.pointList.push("还哈");
</script>
上面是三种实现方式
注意,在changeColor中使用clickIndex需要加this.
computed
<div id="computed">
computed:
<h4>{{fullName}}</h4>
<h4>{{fullName1}}</h4>
</div>
<script>
const computed = new Vue({
el:'#computed',
data:{
firstName:'陈',
lastName:'志源'
},
computed:{
fullName:function(){
return this.firstName+this.lastName;
},
fullName1:{
set:function(){
},
get:function(){
return "黑河:"+this.firstName+this.lastName;
}
}
}
});
</script>
一般set方法可省略。
fullName:function(){
return this.firstName+this.lastName;
}
是
fullName1:{
get:function(){
return "黑河:"+this.firstName+this.lastName;
}
}
}
的省略写法