Vue基础-1 | 8月更文挑战
吃饱饭才有力气写代码~
1.低耦合
低耦合 视图（View）可以独立于 Model 变化和修改 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
2.Vue项目
vue.js 核心，不解释。 VueRouter2 实现路由组织工具。 webpack 项目打包以及编译工具。 nodejs 前端开发环境。 npm 前端包管理器。 axios ajax 接口请求工具。 sass 或 less css 预处理。 element 基于 vue 的后台组件库。 iview 基于 vue 的另一套后台组件库。 vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。
3.第一个Vue实例
4.模板语法
4.1什么是模板语法？
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的模板都是合法的 HTML。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 => vue性能高
4.2模板语法有哪些？
文本绑定： {{}}
双大括号会将数据解释为普通文本，而非 HTML 代码
在HTML的属性上面绑定data中的数据，需要使用v-bind指令 eg:<div v-bind:id=“dynamicId”></div>
{{}}和v-bind指令内部都可以使用 JavaScript 表达式（只能包含单个表达式）
指令：
v-if
v-if v-else-if v-else指令将根据表达式的值的真假来插入/移除元素。
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
不符合条件的部分是不会生成DOM元素的
可以通过v-if来实现同一个Iframe路径不刷新的问题
v-show
v-show指令将根据表达式的值的真假显示/隐藏元素
等价于css的display：none
v-html
将指令的值当作HTML插入到元素中，注意html的内容一定要是可信任的
v-once
初始化绑定一次，后续不再更新
v-model：用于表单控件数据双向绑定
HTML：<input v-model="message">
v-bind: 动态绑定属性
v-on：绑定事件监听器
缩写
v-bind:id='id1' <==> :id='id1'
v-on:click='doSomething' <==> @click='doSomething'
v-for
v-for 指令是需要以 site in sites形式的特殊语法， sites是源数据数组、对象、或数字。
使用v-for指令时要同时要定义:key的值，vue会针对相同key的代码块不会重复渲染，从而加快vue渲染速度
1.循环数组1个参数：参数为每个对象
HTML：<li v-for="site in sites">{{ site.name }}</li> site为每一个对象的值
JS：sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ]
2.循环数组2个参数：参数为每个对象和索引
HTML：<li v-for="(site,index) in sites">{{index}}{{ site.name }}</li>
JS：sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ]
3.循环整数：参数为对象的value
HTML：<li v-for="value in object">{{ value }}</li>
JS：object: { name: '大学', url: 'dafdaf',slogan: '学的不仅是技术'}
5.计算属性compute
5.1产生的原由
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
5.2计算属性和方法的区别
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。也就是说相同的值只会计算一次
方法是不会缓存结果的，调用一次就会执行一次，频繁调用会有性能问题。
6.侦听属性watch
6.1与计算属性的区别
虽然计算属性在大多数情况下可以达到compute的效果，但有时也需要一个自定义的侦听器来响应数据的变化。比如需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
6.2定义及使用方法
...
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
// ajax here
}
}, ...
