Vue 目标
基本语法
模板语法
常用特性
案例
概述
渐进式 JavaScript 框架
声明式渲染 - 组件系统 - 客户端路由 - 集中式状态管理 - 项目构建
基本使用
<body>
<div id="v">
<!-- 插值表达式 -->
<div>{{msg}}</div>
</div>
<!-- 引入vue文件 -->
<script src="vue.js"></script>
<script>
// 创建vue对象实例
var vm = new Vue({
el: '#v',
data: {
msg: 'Hello Vue'
},...
});
</script>
</body>参数：
- el：元素的挂载位置，值可以是CSS选择器或者DOM元素；
- data：模型数据，值是一个对象；
- methods：事件处理函数。
插值表达式 {{...}} —— 将数据填充到 HTML 标签中，花括号里面支持基本的计算操作。
Vue 代码运行是经过 Vue框架，把 Vue代码 编译成 原生JS代码。
模板语法
几个概念
前端渲染：将模板（HTML 标签）与数据结合，形成静态 HTML；
前端渲染方式：原生 JS 拼接字符、使用前端模板引擎（没有事件机制）、使用 Vue 的模板语法。
模板语法内容：插值表达式（上一节）、指令、事件绑定、属性绑定、样式绑定、分支循环结构；
1、指令（数据绑定）
本质是自定义属性，格式都是以 v- 开头；
（1）由于插值表达式存在 “闪动” 的问题
解决：v-cloak
用法：
- 提供CSS样式 [v-cloak]，用来隐藏内容；
- 将 v-cloak 插入到 HTML 标签中；
- 代码运行时在内存中进行值的替换，再显示。
（2）数据绑定
数据响应式 —— 页面内容随数据而变化； （H5 中的响应式 —— 页面样式随屏幕尺寸而变化）
v-once ：使内容不再具有响应式功能，用于不需要再改变的数据。
数据绑定 —— 把数据填充到 HTML 标签中，也属于数据响应式；
数据绑定指令的作用类似于插值表达式：
- v-text ：填充纯文本，比插值表达式简洁
<div v-text='msg'> </div>
- v-html ：填充 HTML 片段
msg 数据里有 HTML 标签
存在安全问题
可使用网站内部数据，不能使用来自第三方的数据
- v-pre ：跳过编译过程，填充原始信息
双向数据绑定 —— 数据的变化会使页面内容发生变化（响应式），并且页面的内容也会改变数据，主要用于表单输入域；
v-model： <input type="text" v-model='msg'>
MVVM 设计思想
M(model) ：模型，本质是数据；
V(view) ：视图，本质是DOM；
VM(view-model)：事件监听 连接从 视图view 到 模型model ，数据绑定 连接从 模型model 到 视图view（双向绑定）。
2、事件绑定
v-on： <button v-on:click='表达式 / 事件函数'> </button> 或
<button @click='表达式 / 事件函数'> </button>
（1）其中，事件函数的调用方式有：
<script>
// 创建vue对象实例
var vm = new Vue({
el: '#v',
data: {...},
methods: {
// 事件处理函数
handle: function() {...}
}
});
</script>- 直接绑定函数名称
<button @click='handle' >点击</button>
- 调用函数
<button @click='handle()' >点击</button>
（2）事件函数传参：
- 传递普通参数
- 传递事件对象
如果事件调用方式是 直接绑定事件名称，它会默认将事件对象作为第一个传递参数，可以不写形参；
如果是 调用函数，可以将事件对象最为最后一个传递参数，且必须显式传递 $event：
<button @click='handle( pra, $event )'>点击</button>
（3） 事件修饰符：
.stop ：阻止冒泡， v-on:click.stop / @click.stop
.prevent ：阻止默认行为（如链接跳转）， v-on:click.prevent
...
它们可连接使用，但是顺序不同作用可能也不同。
按键事件修饰符：与键盘事件 keyup 搭配使用，使按下一个键后发生某个事件；
.enter ：回车键， <input type="text" v-on:keyup.enter='submit' >
.delet ：删除键， <input type="text" v-on:keyup.delete='handle' >
...
自定义按键修饰符：
- 现在 JS 中自定义 Vue.congfig.keyup.自定义名 = 某个按键的ASCII码;
- 就可以在 html 标签中直接使用自定义的按键名： v-on:keyup.自定义名 表示按下某个按键会触发事件。
也可以 v-on:keyup.ASCII码 但是不直观。
3、属性绑定
v-bind 动态处理属性
- 在 vue 的 data 中，将一个属性值指定一个名字；
- 再写到标签里去 ： <a v-bind: href="url" > .. </a> 可简写为 <a :href="url" >
v-model 双向数据绑定 底层实现原理：
<input v-bind:value="msg" v-on:input='msg=$event.target.value' >
相当于用 v-bind 绑定数据之后，再用 v-on 将【input输入操作】绑定一个【页面内容发生变化后的值 赋值给数据】这样的事件，实现数据更新。
4、样式绑定
（1）class 样式处理（类选择器）
对象语法：v-bind:class="{ 样式选择器名: is选择器名,... }"
其中，is选择器名 是在 vue 的 data 中自定义的一个布尔值，true 则控制样式显示。
数组语法：v-bind:class="[ 自定义选择器名,... ]"
在 vue 的 data 中，为样式选择器指定一个名字，就可以在事件函数中直接使用自定义名来修改样式。
对象语法和数组语法可以一起使用： v-bind:class="{ 样式选择器名: is选择器名,... }, [ 自定义选择器名,... ]" ；
v-bind:class 后面绑定样式可以简化，{ 样式选择器名: is选择器名,... }, [ 自定义选择器名,... ] 都可以在 vue 的 data 中自定义为一个对象或者数组；
绑定了新的样式，元素原来就有的 样式class 也会保留。
（2）style 样式处理（内联样式）
对象语法：v-bind:style="{ 样式属性: 属性名,... }"
数组语法：v-bind:style="[ 自定义样式象名,... ]"
5、分支循环结构
分支：
v-if v-else-if v-else ：根据后面的条件，选择性的渲染符合条件的元素（DOM元素的增删）；
v-show ：设置为 true 或 false，控制元素是否显示（元素已经渲染到页面），dispaly=none；
v-show 与 v-if 指令的功能相似，都是控制元素的显示或隐藏；
但是 v-if 指令会根据表达式重建或销毁元素或组件以及它们所绑定的事件，v-show 指令只是简单地设置 css 的 dispaly 属性；
v-if 指令开销较大，所以更适合条件不经常改变的场景，而 v-show 指令适合条件频繁切换的场景。
循环：
遍历数组、对象等，将数组中的数据填充到页面标签中
v-for ： <li :key='item.id' v-for= 'item in array' > {{item}} </li>
key 帮助 vue 区分不同的元素，提高性能。
分支v-if、循环v-for 可以同时使用，带有条件地进行循环。
案例：
一般步骤
- 用传统方式写出 HTML 标签结构和样式，实现静态页面；
- 根据 Vue 模板语法，重构结构和样式；（模板填充）
- 根据功能要求，绑定样式、属性；
- 处理事件绑定和控制逻辑
常用特性
1、表单操作
表单元素有 input 单行文本、textarea 多行文本、select 下拉多选、radio 单选框、checkbox 多选框。
相应的操作
文本：双向绑定数据 v-model；
提交按钮：阻止跳转 .prevent；
单选框、多选框、下拉（可单选或多选）：value 与 v-model 共同控制选项；
下拉多选：要添加属性 multiple="true"
表单域修饰符
v-model.number ：将数据转换为数值类型
v-model.trim ：去掉开头和结尾的空格
v-model.lazy ：将 input事件（输入内容改变就触发）切换为 change事件（失去焦点才触发），因为v-model 默认绑定的是 input事件，
2、自定义指令
上一章模板语法中的指令（v-text、v-if、v-on、v-model 等等）都是内置指令；
自定义规则
Vue.directive('指令操作', {
inserted: function(元素形参) {
元素形参.指令操作
}
})其中：
指令操作是 focus 等；
inserted 是钩子函数，类似于bind；
指令的用法就是在元素标签中添加 v-指令操作，如 v-focus 。
还可以加形参 binding，传递数据去进行指令内部的操作：
// 自定义指令，将背景颜色改为橙色
Vue.directive('color', {
inserted: function(el, binding) {
// binding 是一个对象
el.style.backgroundColor = binding.value.color;
}
})
// 使用指令
<div v-color='{color:"orange"}'>
局部指令
指令的作用范围有限制，只能作用域本组件中；
写法：将自定义指令写到 Vue 的 data 参数中
data: {
directives: {
// 定义指令
focus: {
inserted: function(el) {
el.focus()
}
}
},
...
}
3、计算属性
为了简化 HTML 模板中的表达式计算，在 Vue 实例中增加一个计算属性 computed；
若有一个数据是多个变量或对象进行计算后返回的结果，就把它以变量的形式声明在 computed 中，
computed 就可以进行监控，当其中关联的数据发生改变时，就会触发函数进行计算，然后重新渲染数据和页面。
var vm = new Vue({
el: '#v',
data: {...},
computed: { // 计算属性
// 计算的函数
变量名: function() {...}
}
});
计算属性与方法 methods 的区别：
是否缓存 —— 计算属性是基于它的依赖数据进行缓存的，若数据没有变化，就直接使用之前的缓存结果；
methods 方法不存在缓存，每次页面渲染时都会调用执行。
4、侦听器
监听 vue 实例（整个对象或单个变量）的变化，可以在数据变化时执行异步或开销较大的操作；
数据一旦发生变化，侦听器就通知其中所绑定的方法：
var vm = new Vue({
el: '#v',
data: {...},
watch: { // 侦听器
// 侦听函数
数据: function() {...}
}
});
5、过滤器
格式化数据，比如将字符串所有单词变成首字母大写、日期数据格式化等；
自定义过滤器步骤：
- 定义过滤器： Vue.filter('过滤器名', function(value) {...})
- 使用： <div> {{msg | 过滤器名 |...}} </div>
可以级联使用，可以用在属性绑定里面；
局部过滤器：
filters:{
capitalize: function() {...}
)
6、生命周期
Vue 实例的生命周期——三个主要阶段：
- 挂载（初始化相关属性）
- 更新（修改元素或组件）
- 销毁（销毁相关属性）
三个阶段中共有八个钩子函数，当程序处于周期的某个阶段时，其中的钩子函数自动被触发调用；
开发中，一般用于获取后台数据（mounted 钩子函数）。
案例-图书管理
数组相关的 API ：将原生数组方法变成响应式的，即页面内容随数据而改变；
（1）变异方法（修改原有数组）
push、pop、shift、unshif、splice、sort、reverse()
（2）替换数组（生成新数组，需要重新赋值）
filter、contact、slice()
（3）修改响应式数据
Vue.set (vm.数据名, 索引 / '对象属性', '修改内容')
（vm.list[1] = ... vm.info.gender = ... .这种方式增加的数据不是响应式的）
11.25
6330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
