一、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学习起来非常简单。
官网：
二、vue特性
l 轻量
vue.js库的体积非常小的，并且不依赖其他基础库。
l 数据绑定
对于一些富交互、状态机类似的前端ui界面，数据绑定非常简单、方便。
l 指令
内置指令统一为(v-*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的dom。
l 插件化
vue.js核心不包含router、ajax、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
l
组件可以扩展 html 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
l 兼容性
vue 不支持 ie8 及以下版本，因为 vue 使用了 ie8 无法模拟的 ecmascript 5 特性。但它支持所有兼容 ecmascript 5 的浏览器。
三、vued的使用：
它有两个版本：开发版本和生产版本（由于代码太多，具体的vue.js文件需要到vue官网复制）。
<!– 引入vue开发版文件 –>
<script type="text/javascript" src="js/vue/vue.js"></script>
四、vue实例讲解
1、vue实例挂在（el）的标签
每个vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <h3> {{messge}}</h3> 姓名：{{ur.name}}；年龄：{{ur.age}}；性别：{{ur.x}} </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ messge:"变形金刚", ur:{ name:"张三", age:18, x:"男" } } }); // 通过vue实例可以直接修改data对象中的数据 app.messge="修改后的变形金刚"; app.ur.name="王小二"; </script> </body></html>2、vue中的数据(data)
1 、vue实例的数据保存在配置属性data中, data自身也是一个对象.
2、通过vue实例直接访问和修改data对象中的数据,及时同步的页面上
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <h3> {{messge}}</h3> </div> <div class="cla"> <h3> {{messge}}</h3> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ messge:"变形金刚" } }); var ha= new vue({ el:".cla", data:{ messge:"搬砖的程序员" } }); </script> </body></html>3、vue中的方法(methods)
1、vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
2、方法都是被vue对象调用,所以方法中的this代表vue对象
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <h3> {{messge}}</h3> {{haa()}} </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ messge:"变形金刚", ur:{ name:"张三", age:18, explain:"过来啊！" } }, methods:{ //方法写法一： haa:function(){ return this.ur.name+this.ur.explain+"我请你吃糖果"; }, //方法写法二： yaa(){ //跳出一个弹窗 alert(this.messge+"是钢铁直男"); } } }); app.yaa(); </script> </body></html>4、vue数据双向绑定
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <!--监听input中值的改变同步到data中的message上: v-model:数据的绑定； 将app对象中的message值绑定到input中，同时输入input值后，也作用于app的message值。 --> <h3> {{messge}}</h3> <input type="text" v-model="messge" /> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ messge:"变形金刚", } }); </script> </body></html>五、vue架构的认识：
vue是一款开源的javascript mv*（mvvm、mvc）框架。
vue引入了mvvm (model-view-viewmodel)模式，他不同于mvc架构.
mvc模式：
model： 数据模型，一些javascript 对象，比如 {name : “小小强”,age : 16};
view: 视图，网页中的内容，一般由html模板生成。
controller : 控制器（路由），视图和模型之间的胶水。
mv vm模式：
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中的dom listeners工具会帮助我们监听页面上dom元素的变化，一旦发生变化，model中的数据也会发生改变；
对于model而言，当我们添加或修改model中的数据时，viewmodel中的data bindings工具会帮助我们更改view中的dom元素。从而实现view和model的分离，达到对前端逻辑mvvm的分层架构。
六、vuejs表达式
语法：
vuejs表达式写在双大括号内：{{ expression }}。
vuejs表达式把数据绑定到 html。
vuejs将在表达式书写的位置”输出”数据。
vuejs表达式 很像 javascript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstname + ” ” + lastname }}
案例：
1、简单表达式
在{{ }}中可以进行简单的运算
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <!--简单表达式 --> <h1>{{5+5}}</h1> <!-- +:运算，字符串连接 --> <h1>{{5+"v5"}}</h1> <h1>{{5+"5"}}</h1> <!-- -：减法 --> <h1>{{"5"-"5"}}</h1> <h1>{{5*5}}</h1> <!-- *:乘 法 --> <h1>{{"5"*"5"}}</h1> <!-- / 除法--> <h1>{{5/5}}</h1> <h1>{{5/5}}</h1> 地球是恒星还是行星 </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app" }); </script> </body></html>2、三目表达式
在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <!--三目运算 --> {{ show?"真":"假"}} </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ show:true, } }); </script> </body></html>3、字符串表达式
1、直接使用字符串字面值作为字符串对象
2、使用data中的字符串对象
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> {{"这是字面值"}}<br/> {{"这是字面值".length}}<br/> {{message.length}}<br/> <!--从字符串索引1开始获取，到索引5之前结束--> {{message.substring(1,5)}}<br/> <!--从字符串索引2开始获取，到索引6之前结束；toupperca():将小写变为大写--> {{message.substring(2,6).toupperca()}}<br/> <!--substr(index,length):从index开始截取，截取length个字符串 --> {{message.substr (1,3)}}<br/> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ message:"我在data里面" } }); </script> </body></html>4、对象表达式
在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> {{messge}}<br/> {{json.stringify(messge)}}<br/> {{messge.tostring()}}<br/> {{messge.name}}<br/> {{messge.age}}<br/> {{messge.getage()}}<br/> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var ur ={ name:"张三", age:19, getage:function(){ return this.age; }, tostring:function(){ return "姓名:"+this.name+",年龄:"+this.age; } } var app=new vue({ el:"#app", data:{ messge:ur } }); </script> </body></html>5、数组表达式
在表达式中可以使用javascript数组中的任何语法来操作数组.
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> {{hobbys}}<br/> {{hobbys[0]}}<br/> {{hobbys.length}}<br/> {{hobbys.tostring()}}<br/> <!--用“-----”将每个元素分隔开显示--> {{hobbys.join("------")}}<br/> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ 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中的一个属性.
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <span v-text="message"></span><br/> <span v-text="ur.urname"></span><br/> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ message: "<h1>这是一个span!</h1>", ur: { urname: "李李" }, } }); </script> </body></html>5、v-html指令
注意事项: 1、{{表达式}} 可以插入的标签的内容中 2、v-text和v-html更改标签中的所有内容<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <!--将message的值解析为html来执行--> <div v-html="message"></div> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ message: "<h1>这是一个html!</h1>", } }); </script> </body></html>6、v-for指令
数组：
1、v-for=”元素 in 数组”（v-for=”ele in arr”）
2、v-for=”(元素,索引) in 数组”（v-for=”(ele,index) in arr”）
对象：
1、v-for=”值in 对象”（v-for=”value in obj”）
2、v-for=”(值,键) in 对象”（v-for=”(value,key) in obj”）
3、v-for=(值,键,索引) in 对象（v-for=(value,key,index) in obj）
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <h1>循环数组</h1> <ul> <li v-for="hobby in hobbys">{{hobby}}</li> </ul> <h1>遍历对象</h1> <ul> <li v-for="value in student">{{value}}</li> </ul> <h1>带索引循环数组</h1> <ul> <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li> </ul> <h1>带键遍历对象</h1> <ul> <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li> </ul> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ hobbys : ["爬山","游泳","打豆豆","睡觉"], student : { name: "小毛", age: 2, x: "男", }, num : 10, str : "itsource", } }); </script> </body></html>7、v-bind指令
1、v-bind:属性名=”表达式”（v-bind:src=”路径”简写：src=”路径”）
2、v-bind=”对象”
注意：
将一个对象 键 和 值 作为标签的属性的名字和值时,在v-bind后不需要指定属性的名字
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <!-- v-bind指令 作用：将html的属性和vue实例data值绑定到一起 语法1: v-bind:属性名="表达式" 语法2: :属性名="表达式" 语法3: v-bind="对象" --> <div id="app"> <iframe v-bind:src="src"></iframe><br /> <iframe :src="src"></iframe><br /> <!--<iframe src="/d/file/titlepic/" class="myiframe"></iframe>--> <!--<iframe v-bind="attr"></iframe>--> <iframe :src="attr.src" :class="attr.class"></iframe><br /> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ src:"/d/file/titlepic/", attr:{ src:"/d/file/titlepic/", class:"myiframe" } } }); </script> </body></html>8、v-model指令
1、v-model只作用于以下表单:
input、 lect、 textarea
注意：在input标签中，当v-model和value属性都存在的时候，在前台页面上展示的是v-model的值，但value的值却没有改变，提交表单时提交的还是value值。
复选框v-mode表达式的值为一个数组。
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <input v-model="message" value="这是value值" /><br /> 爱好: <input type="checkbox" v-model="hobby" value="1"/>唱 <input type="checkbox" v-model="hobby" value="2"/>跳 <input type="checkbox" v-model="hobby" value="3"/>rap 性别 <input type="radio" v-model="x" value="1"/>man <input type="radio" v-model="x" value="2"/>woman </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ message:"dbl", hobby:[1,2], x:2 } }); </scrip幼儿一周食谱t> </body></html>9、v-show指令
<标签名 v-show=“真假表达式”></标签名>
如果v-show=”真”,标签中添加display:none样式
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <!-- v-show: 语法： v-show="真假表达式" 如果表达式为假,相当于是在这个标签上添加css样式:display:none(相当于隐藏了) --> <p v-show="isshow">我是07</p> </div> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ isshow:true } }); </script> </body></html>10、v-if指令
<标签名 v-if=“表达式”></标签名>
<标签名 v-el-if=“表达式”></标签名>
<标签名 v-el-if=“表达式”></标签名>
<标签名 v-el></标签名>
<!doctype html><html> <head> <meta chart="utf-8"> <title></title> </head> <body> <div id="app"> <p v-if="money<10">中午不吃饭</p> <p v-el-if="money>=10&&money<20">吃牛肉面</p> <p v-el>吃拉面</p> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ money:15 } }); </scri拓展心得pt> </body></html>八、事件
v-on:事件名称=”表达式或者vue函数的调用”(例如：v-on:click=”方法名()”)
简写：@事件名称
<!doctype html><html> <head> <meta c沙特国王阿卜杜拉hart="utf-8"> <title></title> </head> <body> <div id="app"> <button @click="clickme(1)">点我拉风的游戏名字试试</button> <button @click="clickme(2)">点我试试</button> </div> <!--开发版本(项目上线之后要替换成生产版本)；生产版本：vue.min.js--> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> var app=new vue({ el:"#app", data:{ money:15 }, methods:{ clickme(num){ alert(num) } } }); </script> </body></html>九、综合练习
<!doctype html><html> <head> <meta chart="utf-8" /> <title>vue综合练习</title> <style type="text/css"> td{ align-content: center; } </style> </head> <body> <div id="app"> <h3>购物车</h3> <h4 v-if="products.length==0">空空如也</h4> <div v-el> <table border="1" cellspacing="0" align="center"> <tr> <th>编号</th> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>操作</th> </tr> <tr v-for="(product,index) in products"> <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> <td><button @click="del(index)">删除</button></td> </tr <tr> <td colspan="5">总价：{{total}}</td> </tr> </table> </div> </div> <script type="text/javascript" src="js/vue.js" ></script> <script> var app = new vue({ 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(var i in this.products){ this.total+=this.products[i].price*this.products[i].num; } } }, //最后运行 mounted(){ this.count(); } }); </script> </body></html>
本文发布于:2023-04-06 08:54:23，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/2ad77a0b10fe98d06f69b537a3051bde.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：vue初级使用.doc
本文 PDF 下载地址：vue初级使用.pdf
| 留言与评论（共有 0 条评论） |
