Vue
1. Vue基本概念（vue是什么？）
Vue.js 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2. Vue.js 安装
a、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。
b、使用 CDN 方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
- Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
c. NPM
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
3.Vue的目录结构及解释
目录解析
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js:项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
在前面我们打开 APP.vue 文件，代码如下（解释在注释中）：
4. 第一个Vue程序（HelloVue ！）
模板
指令：将控制和html联系在一起
html内容
样式
控制
data:数据
el 指定模板
methods 方法
a.第一个vue程序
1.引入vue.js库
<script src="vue.js"></script>
- 创建vue实例
<script>
new Vue({
el：'#app',
data: {msg:'Hello,Vue.js 2'}
})
</script>
- 完整html导入
<div id="app">
{{message}}
</div>
4.完整的helloWorld代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>Hello World</h1> <hr>
<div id="app">
{{message}} <!--通过vue特殊指令，来让vue的data数据与模板联系在一起-->
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app', //指定vue模板css选择器
data:{ //指定data数据
message:'hello Vue!'
}
})
</script>
</body>
</html>
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
5. 模版语法（文本渲染指令）
a. {{表达式}}
Vue.js 提供了完全的 JavaScript 表达式支持。
<div id="app">
{{1+2}}
{{msg}}
<h1>{{msg}}</h1>
<p>{{msg}}</p>
<p>{{5>8?'大于':'小于8'}}</p>
<p>{{['mumu','小明','zql'].join('---')}}</p>
<!--
1. {{}}是vue显示data数据的指令
2. {{}}vue指令只能在指定的模板标签内有用#app
3. {{}}可以在html标签内使用
4. {{}}在里面可以使用简单的javascript表达式
5. {{}}字符串要用单引号
-->
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",//指定vue的模板css选择器
data:{msg:"hello Vue!"}// 指定data数据
})
</script>
b. v-text
c. v-html (v-html 能够解析数据里面的html标签)，防止xss,csrf攻击
<div id="app">
<h1>{{rawMsg}}</h1>
<h1 v-text="rawMsg"></h1>
<h1 v-html="rawMsg"></h1>
<div v-show="flag">你好</div>
<!-- 1. vue文本渲染指令 {{}}
2. v-text
v-html 能够解析数据里面的html标签-->
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello Vue!",
rawMsg:"<b>你<em>好</em>vue!</b>",
flag:false
}
})
</script>
6. 属性语法
v-bind 指令
属性绑定 (v-bind:属性名=“值”)(:属性名=“值”)
<div id="app">
<p v-bind:title="vtitle">你好前端</p>
<h1 :title="vtitle">抗击病毒</h1>
<!-- 属性绑定指令：v-bind
属性绑定还有简写方式 :属性名 -->
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
vtitle:"中国加油！，武汉加油！",
}
})
</script>
7.条件渲染
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
通过移除dom节点的方法来隐藏，判断是否加载，可以减轻服务器的压力，在需要时加载。
<h1 v-if="awesome">Vue is awesome!</h1>
v-else
也可以用 v-else 添加一个“else 块”：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
v-show
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。通过css display:none方法来隐藏，可以使客户端操作更加流畅。
注意：
v-else-if
2.1.0 新增
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
注意
v-show 不支持 <template> 元素，也不支持 v-else。
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
案例
<div id="app">
<p v-if="flag">我是v-if显示的</p>
<p v-show="flag">我是v-show显示的</p>
<!-- 1. vue 条件渲染指令 v-show -->
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{flag:false }
})
</script>
8. 列表渲染
v-for
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items 形式的特殊语法，其中items 是源数据数组，而 item则是被迭代的数组元素的别名。
用 v-for 把一个数组对应为一组元素
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
结果：
- Foo
- Bar
在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果：
- Parent - 0 - Foo
- Parent - 1 - Bar
你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
在 v-for 里使用对象
你也可以用 v-for 来遍历一个对象的属性。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
结果：
- How to do lists in Vue
- Jane Doe
- 2016-04-10
你也可以提供第二个的参数为 property 名称 (也就是键名)：
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
- title: How to do lists in Vue
- author: Jane Doe
- publishedAt: 2016-04-10
还可以用第三个参数作为索引：
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10
在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
key
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。
列表渲染案例 -- 数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="index">{{index+1}}--{{item}}</li>
</ul>
<!-- 在模板中展示列表 list -->
<!-- 循环的索引值 -->
<!-- 循环中的Key，为了让vue跟踪了每个节点的身份，
用于排序，删除等操作，最好为每项列表提供一个唯一的key值属性 -->
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
list:['react','vue','jquery','angular']
},
})
</script>
</body>
</html>
列表渲染案例 -- 对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
</head>
<body>
<div id="app">
<ul>
<!-- 姓名:曾庆林--年龄:20岁 -->
<li v-for="(item,index) in list" :key="index">
姓名:{{item.name}}--年龄:{{item.age}}岁
<button @click="deleteItem(item,index)">x</button>
</li>
<!-- 实现单击删除当前这行列表 (item当前列表数据 index当前列表下标) -->
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[
{name:"mumu",age:18},
{name:"zql",age:16},
{name:"曾庆林",age:20},
]
},
methods:{
deleteItem(item,index){
var ind = this.list.indexOf(item);
this.list.splice(ind,1);
// this.list.splice(index,1);
// 找到list 从第index个删除一个
// 如果只传item 你有办法删除吗
}
}
})
</script>
</body>
</html>
