一起学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>
备注
一首清新小诗,点散午后的烦忧。
山居秋暝
作者:王维 (唐)
空山新雨后,天气晚来秋。
明月松间照,清泉石上流。
竹喧归浣女,莲动下渔舟。
随意春芳歇,王孙自可留。