二、vue学习
1.基本语法
在Vue中元素相对于之前学习的，改动全部在指定的div中
数据属性：
el参数：类似于DOM元素中的id
data：用于定义属性，实例中有三个属性分别为：site、url、alexa
methods：用于定义的函数，可以通过return来返回函数值
{{}}：用于输出对象属性和函数返回值
vue还提供了有用的实例属性与方法：他们都有前缀$，以便与用户定义的属性区分开来
指令：带有v-前缀的特殊属性，用于在表达之改变时，将某些行为应用到DOM上
参数：在指令后以冒号指明
修饰符：修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
v-html指令用于输出html代码
v-bind 将这个元素节点的tilte特征和vue实例的message属性保持一致
<script src = "vue.min.js"></script> <body> <div id = "xiaobo"> <span v-bind:title="message">鼠标悬停几秒钟查看此处动态的提示信息 </span> </div> </body> <script> var vm = new Vue({ el:"#xiaobo", data:{ message:"hello,boy" } }) </script>
条件判断语句，v-if | v-else
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层，模板--> <div id="app"> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> </div> </body> <!--1.导入Vue.js--> <script src="vue.min.js"></script> <script> var vm = new Vue({ el:"#app", /*Model：数据*/ data:{ ok:true } }); </script> </html>
v-else-if v-if v-else
v-else,v-else-if 必须跟在v-if或者v-else-if之后
=== 三个等号在js中表示中表示绝对等于(就是数据与类型都要相同)
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "bo"> <h1 v-if="type==='A'">A</h1> <h1 v-else-if="type==='B'">B</h1> <h1 v-else-if="type==='D'">D</h1> <h1 v-else>C</h1> </div> </body> <script src ="vue.min.js"></script> <script> var vm = new Vue({ el:"#bo", data:{ type:"A" } }); </script> </html>
v-for items是数组,item是数组元素迭代的 别名
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "bo"> <li v-for="(item,index) in items"> {{item.message}}---{{index}} </li> </div> </body> <script src ="vue.min.js"></script> <script> var vm = new Vue({ el:"#bo", data:{ items:[ {message:'小'}, {message:'波'}, {message:'小波'} ] } }) </script> </html>
v-on 监听事件emsp；事件有vue的事件，和前端页面本身的一些事件
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "vue.min.js"></script> <body> <div id = "bo"> <button v-on:click="hellobaby">点我</button> </div> <script> var vm =new Vue({ el:"#bo", data:{ message:"hello world" }, methods:{ hellobaby:function (event) { alert(this.message); } } }); </script> </body> </html>
2.表单双绑，组件
在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作
在表单中使用双向数据绑定：
单行文本：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "vue.min.js"></script> <body> <div id = "bo"> 输入的文本：<input type="text" v-model="message" value = "hello"> {{message}} </div> <script> var vm = new Vue({ el:"#bo", data:{ message:"" } }); </script> </body> </html>
多行文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <body> <div id = "app"> 多行文本:<textarea v-model="pan"></textarea>> 多行文本是:{{pan}} </div> </body> <script type="text/javascript"> var vm = new Vue({ el: "#app", data:{ message:"nihao", pan:true } }); </script> </html>
单复选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <body> <div id = "bobo"> 单复选框: <input type = 'checkbox' id = 'checkbox' v-model="checked"> <label for ='checkbox'>{{checked}}</label> </div> <script> var vm = new Vue({ el:"#bobo", data:{ checked:false } }); </script> </body> </html>
多复选框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id = "bo"> 多复选框: <input type="checkbox" id = '1' value = "1" v-model="num"> <label for ='1'>1</label> <input type = 'checkbox' id="2" value="2" v-model="num"> <label for ="2">2</label> <span>选中的值:{{num}}</span> </div> <script> var vm = new Vue({ el:"#bo", data:{ num:[] } }); </script> </html>
单选按钮：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <body> <div id = "bo"> 单选框按钮 <input type = "radio" id = "one" value="One" v-model="picked"> <label for="one">One</label> <input type="radio" id = 'two' value="Two" v-model="picked"> <label for="two">Two</label> <span>选中的值:{{picked}}</span> </div> </body> <script> var vm = new Vue({ el:"#bo", data:{ picked:one } }); </script> </html>
下拉框：v-model表达式的初始值未能匹配任何选项，元素将被渲染为未选中状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <body> <div id = "bo"> 下拉框： <select v-model = "pan"> <option value = '' disabled>-请选择-</option> <option>A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>value::{{pan}}</span> </div> </body> <script> var vm = new Vue({ el:"#bo", data:{ pan:"A" } }); </script> </html>
组件：
组件是一组可以重复使用的模板，跟JSTL的自定义标签，Thymeleal的th：fragment差不多
第一个vue组件
采用vue-cli创建，vue模板文件的方式开发
使用vue.component()方法注册组件
Vue.component()：注册组件 pan:自定义组件的名字 template:组件的模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <body> <div id ="bo"> <pan></pan> </div> <script> Vue.component("pan",{ template:'<li>Hello</li>' }); var vm = new Vue({ el:"#bo", }); </script> </body> </html>
使用props属性传递参数
注意：默认规则下props属性里的值不能为大写
v-for=“item in items”:遍历Vue实例中定义名为items的数组，并创建同等数量的组件
v-bind:path=“item”：将便利的item项绑定到组件中props定义名为item属性上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <body> <div id = 'bo'> <pan v-for="item in items" v-bind:path = 'item'></pan> </div> <script> Vue.component("pan",{ props:['path'], template:'<li>{{path}}</li>' }); var vm =new Vue({ el:"#bo", data:{ items:["java","linux","前端"] } }); </script> </body> </html>
3.Axios异步通信
Axios是一个开源的可以用在浏览器端和Node JS 的异步通信框架，主要作用就是实现AJAX异步通信，功能特点如下：
1.从浏览器中创建XMLHttpRequests
2.从node.js创建http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换JSON数据
8.客户端支持防御XSRF
第一个Axios应用程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="vue" > <div>地名： {{info.name}}</div> <div>地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div> <div>链接:<a v-bind:href="info.url" target="_blank"> {{info.url}}</a></div> </div> </body> <script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var vm = new Vue({ el:"#vue", data(){ return{ info:{ name:null, address: { country:null, city:null, street:null }, url:null } } }, mounted(){//钩子函数 axios .get('data.json') .then(response=>(this.info=response.data)); } }); </script> </html>
4.计算属性、内容分发、自定义事件
计算属性：
这里的计算是个函数：将计算结果缓存结果缓存起来的属性(将行为转化为静态的属性)
注意：methods和computed里的东西不能重名
methods：调用方法使用currentTime1()，需要带括号
computed：调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层,模板--> <div id = "app"> <p>currentTime1:{{currentTime1()}}</p> <p>currentTime2:{{currentTime2}}</p> </div> </body> <script src ="vue.min.js"></script> <script> var vm = new Vue({ el:"#app", data:{ message:"pan" }, methods:{ currentTime1:function(){ return Date.now(); //返回一个时间戳 } }, computed:{ currentTime2:function(){//计算属性：methods， this.message; return Date.now(); //返回一个时间戳 } } }); </script> </html>
结论：计算属性的主要特征就是就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
内容分发
在vue.js中我们使用元素作为承载分发内容的出口，可以应用在组合组件的场景中
测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--首先定义一个代办事项的组件--> <!--第二步 需要让代办事项的标题和值实现动态绑定 留一个插槽--> <body> <div id="vue"> <todo> <todo-title slot="todo-title" title="title"></todo-title> <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>--> <!--如下为简写--> <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items> </todo> </div> </body> <script src="vue.min.js"></script> <script> Vue.component('todo', {template:'<div>\<slot name="todo-title"></slot>\<ul>\<slot name ="todo-items"></slot>\</ul>\</div>'}); Vue.component('todo-title',{ props:['title'], template:'<div>{{title}}</div>' }); Vue.component("todo-items",{ props:["item","index"], template:"<li>{{index+1}},{{item}}</li>" }); var vm = new Vue({ el:"#vue", data:{ title:"芜湖", todoItems:['test1','test2','test3'] } }); </script> </html>
自定义事件
数据项在vue的实例中，删除操作要在组件中完成，vue为我们提供了自定义事件，使用this.
bind给组件绑定参数组件化：组合组件slot插槽组件内部绑定事件需要使用到this.emit(“事件名”,参数);
计算属性的特色，缓存计算数据
5.vue-router路由
路由：允许我们通过不同的URL访问不同的内容
功能：嵌套的路由/视图表 基于Vue.js过度系统的视图过渡效果
模块化的，基于组件的路由配置 细粒度的导航控制
路由参数 查询 通配符 带有自动激活的css class的链接
自定义的滚动行为
安装：npm install vue-router --save-dev
在模块化工程中使用它，必须用过Vue.use()明确的安装路由功能
import Vue from ‘vue’
import VueRouter from ‘vur-router’
Vue.use(VueRouter);
持续更新中。。。。
