vue初级使用

　　一、Vue是什么?

　　Vue（读音/vju?/,类似于view）是一个构建数据驱动的web界面的渐进式框架。采用自底向上增量开发的设计。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

　　Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html

　　Vue只关注视图层。

　　Vue通过新的属性（自定义）和{{表达式}}扩展了HTML。

　　Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

　　Vue学习起来非常简单。

　　官网：https://cn.vuejs.org/

　　二、Vue特性

　　l轻量

　　Vue.js库的体积非常小的，并且不依赖其他基础库。

　　l数据绑定

　　对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

　　l指令

　　内置指令统一为(v-*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

　　l插件化

　　Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

　　l组件化

　　组件可以扩展HTML元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

　　l兼容性

　　Vue不支持IE8及以下版本，因为Vue使用了IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMAScript5的浏览器。

　　三、Vued的使用：

　　它有两个版本：开发版本和生产版本（由于代码太多，具体的vue.js文件需要到vue官网复制）。

　　<scripttype="text/javascript"src="js/vue/vue.js"></script>

　　四、Vue实例讲解

　　1、vue实例挂在（el）的标签

　　每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<h3>{{messge}}</h3>

　　姓名：{{user.name}}；年龄：{{user.age}}；性别：{{user.sex}}

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　messge:"变形金刚",

　　user:{

　　name:"张三",

　　age:18,

　　sex:"男"

　　}

　　});

　　//通过Vue实例可以直接修改data对象中的数据

　　app.messge="修改后的变形金刚";

　　app.user.name="王小二";

　　</script>

　　</body>

　　</html>

　　2、Vue中的数据(data)

　　1、Vue实例的数据保存在配置属性data中,data自身也是一个对象.

　　2、通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<h3>{{messge}}</h3>

　　</div>

　　<divclass="cla">

　　<h3>{{messge}}</h3>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　messge:"变形金刚"

　　}

　　});

　　varha=newVue({

　　el:".cla",

　　data:{

　　messge:"搬砖的程序员"

　　}

　　});

　　</script>

　　</body>

　　</html>

　　3、Vue中的方法(methods)

　　1、Vue实例的方法保存在配置属性methods中,methods自身也是一个对象.该对象中值都是方法体

　　2、方法都是被Vue对象调用,所以方法中的this代表Vue对象

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<h3>{{messge}}</h3>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　messge:"变形金刚",

　　user:{

　　name:"张三",

　　age:18,

　　explain:"过来啊！"

　　}

　　methods:{

　　//方法写法一：

　　haa:function(){

　　returnthis.user.name+this.user.explain+"我请你吃糖果";

　　//方法写法二：

　　yaa(){

　　//跳出一个弹窗

　　alert(this.messge+"是钢铁直男");

　　}

　　});

　　app.yaa();

　　</script>

　　</body>

　　</html>

　　4、vue数据双向绑定

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

<!--监听input中值的改变同步到data中的message上:

　　v-model:数据的绑定；

　　将app对象中的message值绑定到input中，同时输入input值后，也作用于app的message值。

　　-->

　　<h3>{{messge}}</h3>

　　<inputtype="text"v-model="messge"/>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　messge:"变形金刚",

　　}

　　});

　　</script>

　　</body>

　　</html>

　　五、Vue架构的认识：

　　Vue是一款开源的JavaScriptMV*（MVVM、MVC）框架。

　　Vue引入了MVVM(Model-View-ViewModel)模式，他不同于MVC架构.

　　MVC模式：

　　Model：数据模型，一些JavaScript对象，比如{name:"小小强",age:16};

　　View:视图，网页中的内容，一般由HTML模板生成。

　　Controller:控制器（路由），视图和模型之间的胶水。

　　MVVM模式：

　　Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

　　View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

　　ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

　　View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。对于界面表单的交互，通过v-model指令来实现View和ViewModel的同步。对于View而言，ViewModel中的DOMListeners工具会帮助我们监听页面上DOM元素的变化，一旦发生变化，Model中的数据也会发生改变；

　　对于Model而言，当我们添加或修改Model中的数据时，ViewModel中的DataBindings工具会帮助我们更改View中的DOM元素。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。

　　六、VueJS表达式

　　语法：

　　VueJS表达式写在双大括号内：{{expression}}。

　　VueJS表达式把数据绑定到HTML。

　　VueJS将在表达式书写的位置"输出"数据。

　　VueJS表达式很像JavaScript表达式：它们可以包含文字、运算符和变量。

　　实例{{5+5}}或{{firstName+""+lastName}}

　　案例：

　　1、简单表达式

　　在{{}}中可以进行简单的运算

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app"

　　});

　　</script>

　　</body>

　　</html>

　　2、三目表达式

　　在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　show:true,

　　}

　　});

　　</script>

　　</body>

　　</html>

　　3、字符串表达式

　　1、直接使用字符串字面值作为字符串对象

　　2、使用data中的字符串对象

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　{{"这是字面值"}}<br/>

　　{{"这是字面值".length}}<br/>

　　{{message.length}}<br/>

　　{{message.substring(1,5)}}<br/>

　　{{message.substring(2,6).toUpperCase()}}<br/>

　　{{message.substr(1,3)}}<br/>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　message:"我在data里面"

　　}

　　});

　　</script>

　　</body>

　　</html>

　　4、对象表达式

　　在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　{{messge}}<br/>

　　{{JSON.stringify(messge)}}<br/>

　　{{messge.toString()}}<br/>

　　{{messge.name}}<br/>

　　{{messge.age}}<br/>

　　{{messge.getAge()}}<br/>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varuser={

　　name:"张三",

　　age:19,

　　getAge:function(){

　　returnthis.age;

　　toString:function(){

　　return"姓名:"+this.name+",年龄:"+this.age;

　　}

　　varapp=newVue({

　　el:"#app",

　　data:{

　　messge:user

　　}

　　});

　　</script>

　　</body>

　　</html>

　　5、数组表达式

　　在表达式中可以使用JavaScript数组中的任何语法来操作数组.

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　{{hobbys}}<br/>

　　{{hobbys[0]}}<br/>

　　{{hobbys.length}}<br/>

　　{{hobbys.toString()}}<br/>

　　{{hobbys.join("------")}}<br/>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　hobbys:["打游戏","踢足球",'看电视',"游泳"]

　　}

　　});

　　</script>

　　</body>

　　</html>

　　七、Vue指令

　　1、什么是指令

　　指令是一个带有v-前缀的特殊标签属性,指令属性的值预期是单个JavaScript表达式.

　　2、常见的指令

　　v-text=“表达式”设置标签中的文本

　　v-html=“表达式”设置标签中的html

　　v-if=“表达式”判断条件

　　v-for=“表达式”循环

　　v-model=“表达式”数据双向绑定

　　v-on=“表达式”注册事件

　　3、指令的作用

　　1、作用:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

　　2、一个标签元素上可以出现多个指令属性

　　3、指令只能够出现在Vue对象所挂载的标签范围内的标签中

　　4、v-text指令

　　注意事项:

　　1、如果值是html的值,也不会作为普通的文本使用.

　　2、标签中的属性值必须是data中的一个属性.

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<spanv-text="message"></span><br/>

　　<spanv-text="user.username"></span><br/>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　message:"<h1>这是一个Span!</h1>",

　　user:{

　　username:"李李"

　　}

　　});

　　</script>

　　</body>

　　</html>

　　5、v-html指令

　　注意事项:

　　1、{{表达式}}可以插入的标签的内容中

　　2、v-text和v-html更改标签中的所有内容

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<divv-html="message"></div>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　message:"<h1>这是一个Html!</h1>",

　　}

　　});

　　</script>

　　</body>

　　</html>

　　6、v-for指令

　　数组：

　　1、v-for="元素in数组"（v-for="eleinarr"）

　　2、v-for="(元素,索引)in数组"（v-for="(ele,index)inarr"）

　　对象：

　　1、v-for="值in对象"（v-for="valueinobj"）

　　2、v-for="(值,键)in对象"（v-for="(value,key)inobj"）

　　3、v-for=(值,键,索引)in对象（v-for=(value,key,index)inobj）

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<ul>

　　<liv-for="hobbyinhobbys">{{hobby}}</li>

　　</ul>

　　<ul>

　　<liv-for="valueinstudent">{{value}}</li>

　　</ul>

　　<h1>带索引循环数组</h1>

　　<ul>

　　<liv-for="(hobby,index)inhobbys">{{index}}--{{hobby}}</li>

　　</ul>

　　<h1>带键遍历对象</h1>

　　<ul>

　　<liv-for="(value,key,index)instudent">{{index+1}}---{{key}}--{{value}}</li>

　　</ul>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　hobbys:["爬山","游泳","打豆豆","睡觉"],

　　student:{

　　name:"小毛",

　　age:2,

　　sex:"男",

　　num:10,

　　str:"itsource",

　　}

　　});

　　</script>

　　</body>

　　</html>

　　7、v-bind指令

　　1、v-bind:属性名="表达式"（v-bind:src=”路径”简写：src=”路径”）

　　2、v-bind=”对象”

　　注意：

　　将一个对象键和值作为标签的属性的名字和值时,在v-bind后不需要指定属性的名字

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

<!--

　　v-bind指令

　　作用：将html的属性和Vue实例data值绑定到一起

　　语法1:

　　v-bind:属性名="表达式"

　　语法2:

　　:属性名="表达式"

　　语法3:

　　v-bind="对象"

　　-->

　　<divid="app">

　　<iframev-bind:src="src"></iframe><br/>

　　<iframe:src="src"></iframe><br/>

　　<iframe:src="attr.src":class="attr.class"></iframe><br/>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　src:"http://www.baidu.com",

　　attr:{

　　src:"http://www.baidu.com",

　　class:"myIframe"

　　}

　　});

　　</script>

　　</body>

　　</html>

　　8、v-model指令

　　1、v-model只作用于以下表单:

　　input、select、textarea

　　注意：在input标签中，当v-model和value属性都存在的时候，在前台页面上展示的是v-model的值，但value的值却没有改变，提交表单时提交的还是value值。

　　复选框v-mode表达式的值为一个数组。

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<inputv-model="message"value="这是value值"/><br/>

　　爱好:

　　<inputtype="checkbox"v-model="hobby"value="1"/>唱

　　<inputtype="checkbox"v-model="hobby"value="2"/>跳

　　<inputtype="checkbox"v-model="hobby"value="3"/>rap

　　性别

　　<inputtype="radio"v-model="sex"value="1"/>man

　　<inputtype="radio"v-model="sex"value="2"/>woman

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　message:"dbl",

　　hobby:[1,2],

　　sex:2

　　}

　　});

　　</script>

　　</body>

　　</html>

　　9、v-show指令

　　<标签名v-show="真假表达式"></标签名>

　　如果v-show="真",标签中添加display:none样式

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

<!--

　　v-show:

　　语法：

　　v-show="真假表达式"

　　如果表达式为假,相当于是在这个标签上添加css样式:display:none(相当于隐藏了)

　　-->

　　<pv-show="isShow">我是07</p>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　isShow:true

　　}

　　});

　　</script>

　　</body>

　　</html>

　　10、v-if指令

　　<标签名v-if="表达式"></标签名>

　　<标签名v-else-if="表达式"></标签名>

　　<标签名v-else></标签名>

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<pv-if="money<10">中午不吃饭</p>

　　<pv-else-if="money>=10&&money<20">吃牛肉面</p>

　　<pv-else>吃拉面</p>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　money:15

　　}

　　});

　　</script>

　　</body>

　　</html>

　　八、事件

　　v-on:事件名称="表达式或者vue函数的调用"(例如：v-on:click="方法名()")

　　简写：@事件名称

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　</head>

　　<body>

　　<divid="app">

　　<button@click="clickMe(1)">点我试试</button>

　　<button@click="clickMe(2)">点我试试</button>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　<scripttype="text/javascript">

　　varapp=newVue({

　　el:"#app",

　　data:{

　　money:15

　　methods:{

　　clickMe(num){

　　alert(num)

　　}

　　});

　　</script>

　　</body>

　　</html>

　　九、综合练习

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8"/>

　　<title>vue综合练习</title>

　　<styletype="text/css">

　　td{

　　align-content:center;

　　}

　　</style>

　　</head>

　　<body>

　　<divid="app">

　　<h4v-if="products.length==0">空空如也</h4>

　　<divv-else>

　　<tableborder="1"cellspacing="0"align="center">

　　<tr>

　　</tr>

　　<trv-for="(product,index)inproducts">

　　<td>{{index+1}}</td>

　　<td>{{product.name}}</td>

　　<td>{{product.price}}</td>

　　<td><button@click="reduce(index)">-</button>{{product.num}}<button@click="add(index)">+</button></td>

　　</tr

　　<tr>

　　<tdcolspan="5">总价：{{total}}</td>

　　</tr>

　　</table>

　　</div>

　　<scripttype="text/javascript"src="js/vue.js"></script>

　　varapp=newVue({

　　el:"#app",

　　data:{

　　products:[

　　{id:1,name:"西瓜",price:20.00,num:4},

　　{id:2,name:"牛奶",price:30.00,num:2},

　　{id:3,name:"榴莲",price:80.00,num:1}

　　total:0

　　methods:{

　　//新版本写法：del(){}

　　//删除商品

　　del:function(index){

　　this.count();

　　this.products.splice(index,1);

　　//商品数量增加

　　add:function(index){

　　this.count();

　　this.products[index].num++;

　　//商品数量减少

　　reduce:function(index){

　　this.count();

　　//购物车中一种商品的数量至少为1个

　　if(this.products[index].num>1){

　　this.products[index].num--;

　　}

　　//计算商品总价格

　　count:function(){

　　this.total=0;

　　for(variinthis.products){

　　this.total+=this.products[i].price*this.products[i].num;

　　}

　　//最后运行

　　mounted(){

　　this.count();

　　}

　　});

　　</script>

　　</body>

　　</html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55210.shtml