摘要：之对基础理解构造器是一个构造函数，编程中称之为构造器每一个都是一个构造函数的实例，这个过程叫做实例化构造函数需要将其实例化后才会启用构造器要求实例化时需要传入一个选项对象组件其实都是被扩展的实例。
vue.js 之 对vue.js基础理解
Vue构造器
1 . Vue.js是一个构造函数，编程中称之为构造器
2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫做实例化
3 . 构造函数需要将其实例化后才会启用 var vm = new Vue({ //...})
4 . Vue构造器要求实例化时需要传入一个选项对象
{{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)等选项。
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
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 操作上。 插值 文本
HTML{{message}}
还可以插入HTML使用指令v-html
Mustache{{}} 不能在 HTML 属性中使用，应使用 v-bind 指令
这里的数据只会执行一次更新：{{me ssage}}
自定义html
var app2 = new Vue({
el:"#app-2",
data:{
message:"第一次更新",
rawHtml:"- 这里是自定义html
- 这里是自定义html
"
}
})
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 为两个最为常用的指令提供了特别的缩写：
v-on 缩写
计算属性 模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如： 计算属性 vs watched 当你有一些数据需要随着其它数据变动而变动时可以用 vs method计算属性 也可以用 vswatched ；
与method对比{{fullName}}
与vs watched对比计算属性基于自己的依赖进行缓存，只要message没发生变化，多次访问该计算属性就会立即返回之前的计算结果，而不必再次执行函数；
而method调用总会执行该函数。
都是用来处理某些数据随其他数据的变动而变动的，但尽量不要滥用watch，如果代码是命令式和重复的，先考虑下计算属性computed，可使代码更简洁。
{{msg}}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85097.html
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：发布是由团队开源的，操作接口库，已成为事实上的浏览器操作标准。本周正式发布，为我们带来了，，支持自定义头部与脚部，支持增强，兼容原生协议等特性变化。新特性介绍日前发布了大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...
阅读 3481·2021-11-18 10:02
阅读 3044·2019-08-29 18:34
阅读 3346·2019-08-29 17:00
阅读 385·2019-08-29 12:35
阅读 686·2019-08-28 18:22
阅读 1803·2019-08-26 13:58
阅读 1618·2019-08-26 10:39
阅读 2644·2019-08-26 10:11
