vue.js 之 对vue.js基础理解
Vue构造器
1 . Vue.js是一个构造函数,编程中称之为构造器
2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化
3 . 构造函数需要将其实例化后才会启用 var vm = new Vue({ //...})
4 . Vue构造器要求实例化时需要传入一个选项对象
<div class="app">
{{msg}}
</div>
<script>
//vue.js 组件其实都是被扩展的 vue实例。
var vm=new Vue({ //vue 实例
el:".app",
data:{
msg:"hello vue.js"
}
});
// 响应式
//vm(构造器) 是 Vue 的实例
//vue 是 vm 的构造器 ( 构造函数)
</script>
如:{{msg}}
1){{msg}}会在视图中显示
2){{msg}}在实例化后仍然保持数据响应
3){{msg}}尽管在console.log(data)中存在,但视图却找不到,且会报错
4)因此请不要试图在实例化后添加任何属性
实例属性 方法以及生命周期
1 . data会代理其对象里的所有属性.
2 . 只有data里的属性是响应式的,即通信是双向的.
3 . Vue被实例化后,再创建的属性,将不会触发视图更新.
4 . 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue时,需要传入一个选项对象,它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(lifecyclehook)等选项。
1 . 每个Vue实例都会代理其data对象里所有的属性:
2 . Vue实例暴露了一些有用的实例属性与方法
var data = { a : 1 }
var vm = new Vue({
data : data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
1 . 为与代理属性区分,方前添加了前缀$
2 . app.$data===data //->true
app.$el===document.getElementById("app") //->true
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 ( newVal, oldVal ) {
// 这个回调将在`vm.a` 改变后调用
})
实例生命周期
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。
在Vue的整个生命周期中,它提供了一些生命周期钩子,给了我们执行自定义逻辑的机会。
created(创建后)mounted(载入后)updated(更新后)d(销毁后) estroyed(销毁后)
模板语法插值
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
{{}}数据绑定最常见的就是Mustache(双括号)的文本插值,使用v-once指令,可以执行一次插值,后面如果有改变,将不会更新。
<p v-once>{{message}}</p>
HTML
还可以插入HTML使用指令v-html
Mustache{{}} 不能在 HTML 属性中使用,应使用 v-bind 指令
<div id="app-2">
<p v-once>这里的数据只会执行一次更新:{{me ssage}}</p>
<div v-html="rawHtml">自定义html</div>
</div>
var app2 = new Vue({
el:'#app-2',
data:{
message:'第一次更新',
rawHtml:'<ol><li>这里是自定义html</li><li>这里是自定义html</li></ol>'
}
})
app2.message = '第二次更新没有赋值';
指令
v-if、v-on、v-bind
指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
过滤器
是通过后面的函数对前面这个值做一个变化,得出需要的内容
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部,由“管道符”指示:
过滤器可以串联 而且还可以接收参数
{{ message | capitalize }}
new Vue({
// 将message的值首字母变为大写,其它不变
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
计算属性
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
计算属性 vs watched
当你有一些数据需要随着其它数据变动而变动时可以用 vs method计算属性 也可以用 vswatched ;
<div id="app">
{{fullName}}
<input v-model="firstName"/>
<input v-model="lastName"/>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:"chao",
lastName:"qiu",
fullName:"qiuchao"
},
computed:{
fullName:{
get:function(){
return this.lastName+this.firstName;
}
}
},
methods:{
},
filters:{
},
watch:{
firstName:function(){
this.fullName=this.lastName+this.firstName;
//return this.lastName+this.firstName;
},
lastName:function(){
// return this.lastName+this.firstName;
this.fullName=this.lastName+this.firstName;
},
}
});
</script>
与method对比
计算属性基于自己的依赖进行缓存,只要message没发生变化,多次访问该计算属性就会立即返回之前的计算结果,而不必再次执行函数;
而method调用总会执行该函数。
与vs watched对比
都是用来处理某些数据随其他数据的变动而变动的,但尽量不要滥用watch,如果代码是命令式和重复的,先考虑下计算属性computed,可使代码更简洁。
观察Wactchers
提供一个watch选项,当想要在数据变化响应时,执行异步操作或开销较大的操作时使用。
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或昂贵操作时,这是很有用的。
<div id="app">
{{msg}}
<input v-model="msg"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:""
},
watch:{
msg:function(newValue){
localStorage.getItem("msg",newValue);
}
},
mounted:function(){
this.msg = localStorage.getItem("msg");
}
});
</script>