一起学Vue之入门篇
概述
vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
vue的特点
- 易用：已经会了 html、css、javascript？即刻阅读指南开始构建应用！
- 灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
- 高效：a. 20kb min+gzip 运行大小 b. 超快虚拟 dom c. 最省心的优化
vue的引用
想要在程序中引用，可以采用如下方式：
1 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
1 <!-- 生产环境版本，优化了尺寸和速度 --> 2 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 dom 的系统，如下所示：
以文件插值的方式绑定文本内容。写法如下：{{message}}。
el 表示vue绑定的容器id，data表示数据变量 。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>一起学vue</title>
6 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 {{message}}
12 </div>
13 <script type="text/javascript">
14 var app=new vue({
15 el:"#app",
16 data:{
17 message:'welcome to vue world!'
18 }
20 });
22 </script>
23 </body>
24 </html>
我们已经成功创建了第一个 vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 vue 在背后做了大量工作。现在数据和 dom 已经被建立了关联，所有东西都是响应式的。
注意：script必须放置在div的后面，如果放置head中，会提示找不到元素app。
v-bind绑定元素属性
除了文本插值，我们还可以像这样来绑定元素特性：以v-bind，进行绑定title,格式如下：v-bind:title="message"
1 <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
条件判断
v-if="sean"用于判断是否显示标签(通过dom的新增或删除),
v-show="sean"用于判断是否显示标签(通过样式来实现，如：display: none;)
如下所示：sean表示data的一个变量，初始值为true
1 <p v-if="sean"> {{message}} </p>
2 <p v-show="sean">{{message}}</p>
列表循环
v-for 用于展示数组内容，通过改变元素的值，并不能触发页面发生变化，只有通过变异方法实现。
1 <ul>
2 <li v-for="(todo ,index) in todos">{{todo.text}}---{{index}}</li>
3 </ul>
todos也是data的一个变量，如下所示：
1 data:{
2 message:'welcome to vue world!',
3 sean:true,
4 todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
5 grocerylist: [
6 { id: 0, text: '蔬菜' },
7 { id: 1, text: '奶酪' },
8 { id: 2, text: '随便其它什么人吃的东西' }
9 ]
10 }
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
绑定事件
v-on:click 用于绑定单击事件，如下所示：
1 <button v-on:click="handleclick" >点击一下</button>
其中handleclick是vue中的一个自定义事件，如下所示：
1 methods:{
2 handleclick:function(){
3 this.todos.push({text:'学习c#'});
4 }
5 }
表单输入
vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
如下所示：
1 <input type="text" v-model="message" />
自定义组件
在 vue 里，一个组件本质上是一个拥有预定义选项的一个 vue 实例。在 vue 中注册组件很简单，如下所示：
props表示变量列表，其中‘todo’为变量名称，在使用时v-bind:todo="item"关联起来即可。
1 vue.component('todo-item1',{
2 //todo-item1,现在接收一个prop的自定义属性，prop名为todo
3 props:['todo'],
4 template:'<li>{{todo.text}}---{{todo.id}}</li>'
5 });
使用时如下所示：
1 <ol> 2 <todo-item1 v-for="item in grocerylist" v-bind:todo="item" v-bind:key="item.id"></todo-item1> 3 </ol>
其中grocerylist 是定义的一个对象数组。
学习手册
最好的学习就是官网的，本例中涉及的代码如下所示：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>一起学vue</title>
6 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 <!--
12 作者：alan.hsiang@qq.com
13 时间：2019-11-18
14 描述：以文件插值的方式绑定文本内容
15 -->
16 {{message}}
17 <br />
18 <!--
19 作者：alan.hsiang@qq.com
20 时间：2019-11-18
21 描述：以v-bind，进行绑定title,格式如下：v-bind:title="message"
22 -->
23 <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
24 <br />
25 <!--
26 作者：alan.hsiang@qq.com
27 时间：2019-11-18
28 描述：v-if="sean"用于判断是否显示标签(通过dom的新增或删除),
29 v-show="sean"用于判断是否显示标签(通过样式来实现，如：display: none;)
30 -->
31 <p v-if="sean"> {{message}} </p>
32 <p v-show="sean">{{message}}</p>
33 <br />
34 <!--
35 作者：alan.hsiang@qq.com
36 时间：2019-11-18
37 描述：v-for 用于展示数组内容，通过改变元素的值，并不能触发页面发生变化，只有通过变异方法实现，
38 如：push,pop,splice,
39 -->
40 <ul>
41 <li v-for="(todo ,index) in todos">
42 {{todo.text}}---{{index}}
43 </li>
44 </ul>
45 <!--
46 作者：alan.hsiang@qq.com
47 时间：2019-11-18
48 描述：v-on:click 用于绑定单击事件
49 -->
50 <button v-on:click="handleclick" >点击一下</button>
51 <!--
52 作者：alan.hsiang@qq.com
53 时间：2019-11-18
54 描述：v-model 实现表单输入和应用状态之间的双向绑定
55 -->
56 <input type="text" v-model="message" />
57 <br />
58 <ul>
59 <to-item></to-item>
60 </ul>
61 <ol>
62 <todo-item1 v-for="item in grocerylist" v-bind:todo="item" v-bind:key="item.id">
63
64 </todo-item1>
65 </ol>
66 </div>
67 <!--
68 作者：alan.hsiang@qq.com
69 时间：2019-11-18
70 描述：script必须放置在div的后面，如果放置head中，会提示找不到元素app
71 -->
72 <script type="text/javascript">
73 //声明一个简单的组件
74 vue.component('to-item',{
75 template:'<li>这是待办项</li>'
76 });
77 vue.component('todo-item1',{
78 //todo-item1,现在接收一个prop的自定义属性，prop名为todo
79 props:['todo'],
80 template:'<li>{{todo.text}}---{{todo.id}}</li>'
81 })
82 var app=new vue({
83 el:"#app",
84 data:{
85 message:'welcome to vue world!',
86 sean:true,
87 todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
88 grocerylist: [
89 { id: 0, text: '蔬菜' },
90 { id: 1, text: '奶酪' },
91 { id: 2, text: '随便其它什么人吃的东西' }
92 ]
93 },
94 methods:{
95 handleclick:function(){
96 this.todos.push({text:'学习c#'});
97 }
98 }
99
100 });
101
102 </script>
103 </body>
104 </html>
备注
一首清新小诗，点散午后的烦忧。
山居秋暝
作者：王维 (唐)
空山新雨后，天气晚来秋。
明月松间照，清泉石上流。
竹喧归浣女，莲动下渔舟。
随意春芳歇，王孙自可留。
上一篇： 家有两辆车