vue学习第一天笔记
2019-01-03 本文已影响0人
果木山
VUE
- 下载和安装
- vue官网
- npm下载vue模块：
npm install vue - 下载完后使用里面的vue.js文件即可；
- vue.js 是MVVM框架
- 数据可以影响视图，视图也可以影响数据；
- 体验vue.js
- 模板渲染；在视图中用
{{msg}}来引入msg的属性值到页面中，可以通过app.msg="xx"重新赋值，此时页面也会实时更新；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>声明式渲染</title> </head> <body> <div id="app"> {{msg}} </div> <script src="js/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ msg:"hello guo" } }) </script> </body> </html>- 动态操作DOM属性：通过定义数据，来实时改变DOM中标签元素的属性值；
- 使用：
v-bind:属性名="动态数据" - 在webstorm中使用v-bind会报红，所以可以删除它只写冒号后面的代码：如：
:属性名="动态数据"
- 使用：
- 条件判断：通过判断数据的布尔值，进而来控制元素的显示和隐藏；
- 使用：
v-if:"动态数据" - 如：
v-if:"bok"；指的是判断bok的值，如果为true,则显示该元素，为false，则不显示该元素；
- 使用：
- 循环：数据和对象的遍历
- 使用：
v-for="(item,index) in 数据数组名或对象名" - 其中：
- 1)如果遍历数组：item获取的是数组中的每个元素，index获取的数组中元素的索引值；
- 2)如果遍历对象：item获取的是对象中的属性值，index获取的对象中的属性名；
- 使用：
- 事件：
- 使用：
v-on:事件名="数据" - 在webstorm中会报红，所以需要使用
@事件名="数据"; - 如果赋值给事件为函数，函数在应用中必须写在methods中，数据写在data中；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> </head> <body> <div id="app"> <p>{{msg}}</p> <button type="button" @click="reverseMsg">顺序</button> </div> <script src="js/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ msg:"这是事件绑定的数据" }, //函数写在methods中 methods:{ reverseMsg:function () { this.msg=this.msg.split("").reverse().join(""); } } }) </script> </body> </html> - 使用：
- 双向数据绑定
- 表单数据和应用数据的联系，通过
v-model来设置表单标签，当表单中输入内容时，可以改变应用中的数据； - 如果一个标签想要只赋值一次应用数据，则可以使用
v-once，这样只会赋值一次数据，数据变化后，它不会再改变；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向绑定数据</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <!--"v-model"实现表单跟应用的数据变化，通过表单值来改变应用数据--> <input type="text" v-model="msg"/> <!--"v-once"指的是赋值一次数据--> <p v-once>{{msg}}</p> </div> <script src="js/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ msg:"这是双向绑定数据" } }) </script> </body> </html> - 表单数据和应用数据的联系，通过
- 自定义组件
- 注册组件：通过
Vue.component("timet",{template:"<li>xxxxx</li>" });- 注册组件名和template模板
- 使用时，直接使用标签即可；
- 父级组件传递数据给子级组件；
- 父级组件设置自定义属性，来向子级传递数据，设置自定义属性用
v-bind:属性名="数据值"; - 子级组件在Vue.component中通过props来获取属性名，即
props:["属性名"],则属性名就代表传递来的数据值；
- 父级组件设置自定义属性，来向子级传递数据，设置自定义属性用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义组件</title> </head> <body> <div id="app"> <ol> <timet v-for="item in getData" v-bind:todo="item" v-bind:key="item.id"></timet> </ol> </div> <script src="js/vue.js"></script> <script> //注册组件 Vue.component("timet",{ props:["todo"], template:"<li>{{todo.msg}}</li>" }); var app=new Vue({ el:"#app", data:{ getData:[ {id:0,msg:"这是蔬菜1"}, {id:1,msg:"这是蔬菜2"}, {id:2,msg:"这是蔬菜3"}, {id:3,msg:"这是蔬菜4"} ] } }) </script> </body> </html> - 注册组件：通过
- 表达式和v-html
- 表达式：
{{}}- 可以进行设置数据值，如
{{msg}}； - 可以进行赋值，如
{{msg=200}},此时应用中的msg数据也会变化； - 可以使用三目(三元表达式)，如
{{bok?333:444}},即条件判断成立与否，得到的值不同；
- 可以进行设置数据值，如
- v-html：设置在标签上，代表将数据值，以标签的形式插入到该标签中；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表达式</title> </head> <body> <div id="app"> <!--{{}}表达式，支持 msg 赋值 三目(三元表达式)--> {{msg}} {{msg=444}} {{bok?666:777}} <!--"v-html"：将变量值，以标签的形式插入到p中--> <p v-html="glt"></p> <!--表达式，将变量值，以内容值的形式插入到p中--> <p>{{glt}}</p> </div> <script src="js/vue.js"></script> <script> var app=new Vue({ el:"#app", data:{ msg:"333", bok:true, glt:"<li>这是内容</li>" } }) </script> </body> </html> - 表达式：
- v-if和v-show
- v-if:判断数据值的布尔值，如果为true,则该元素显示，否则，删除该标签节点；相当于removeChild()；
- v-show:判断数据值的布尔值，如果为true,则该元素显示，否则，该元素隐藏，不会删除该标签节点；相当于display:none;
- 如果频繁切换显示或隐藏，就用v-show；判断数据是否存在，就用v-if；
- 模板渲染；在视图中用
购物车实例
- 思路：
- 下载bootstrap模块，构建静态页面，命令：
npm install bootstrap@3;规定版本，否则，一些css样式不能使用； - 引入bootstrap.css文件；
- 构建静态页面，在信息区域，通过在应用区域data内设置ary数组数据，在页面中通过v-for来遍历ary数据，拿到item数据每一项元素，和index，索引值；
- 删除功能：通过点击表格中的删除按钮，来触发deleteOne函数，函数中删除对应的ary中的数据，进而页面中删除；
- 重要：通过v-for遍历数组时，拿到每个数组元素的索引index，通过点击事件设置时，将index作为参数传给deleteOne函数，函数内拿到索引值，通过splice就可以删除此项；
- 删除全部功能：点击删除全部按钮，触发deleteAll函数，将ary赋值为空数组；
- 为了实现，当删除全部后，让删除全部一行也删除或隐藏，可以在tr上设置v-if或v-show，判断ary的长度是否为0，若为0，则赋值为true，进而该行就隐藏或删除；
- 增加功能：点击按钮触发addOne函数，函数内将数据插入到ary中；
- 重点：在输入内容的表单上，设置
v-model="xxx"，这样就实现了表单输入数据和应用数据的同步，需注意的是，在应用data中一定要设置shopname和shopprice为空，否则，会报错； - 当输入内容后，shopname和shopprice的值就会实时更新，输入完毕后，点击按钮，然后将两个值以对象的形式，插入到数组中；数据增加后，将两个值赋值为空；即重置；
- 筛选：
- 当点击按钮后，必须判断shopname和shopprice值是否均存在，如果不存在，则不能提交；
- 存在的情况下，可以对输入的shopname值进行判断，然后进行一系列的操作；
- 重点：在输入内容的表单上，设置
- 重置功能：点击重置按钮，然后将shopname和shopprice值赋值为空；
- 下载bootstrap模块，构建静态页面，命令：
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车实例</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.table-bordered{
border: 2px solid green;
}
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td{
border: 1px solid red;
vertical-align: middle;
}
.btn-danger{
border-width: 0;
padding: 5px 15px;
}
</style>
</head>
<body>
<div class="container" id="app" style="margin-bottom: 100px;">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered" style="font-size: 20px;">
<caption class="text-danger" style="font-size:30px;font-weight: 700">购物车</caption>
<tr>
<th class="text-center">商品名称</th>
<th class="text-center">商品价格</th>
<th class="text-center">操作</th>
</tr>
<tr v-for="(item,index) in ary">
<td class="text-center">{{item.name}}</td>
<td class="text-center">{{item.price}}</td>
<td class="text-center"><button type="button" class="btn-danger" @click="deleteOne(index)">删除</button></td>
</tr>
<tr v-if="ary.length?true:false">
<td colspan="3" class="text-right"><button type="button" class="btn-danger" @click="deleteAll">删除全部</button></td>
</tr>
</table>
</div>
<div class="col-md-12">
<form style="font-size: 20px;">
<div class="form-group">
<label for="shopname">商品名称</label>
<input type="text" class="form-control" id="shopname" v-model="shopname">
</div>
<div class="form-group">
<label for="shopprice">商品价格</label>
<input type="number" class="form-control" id="shopprice" v-model="shopprice">
</div>
<div class="from-group">
<input type="button" id="dd" class="btn btn-primary" @click="addOne" value="添加">
<input type="button" id="dd1" class="btn btn-warning" @click="resetData" value="重置">
</div>
</form>
</div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
shopname:"",
shopprice:"",
ary:[
{name:"小米6",price:1999},
{name:"小米7",price:2999},
{name:"小米8",price:3999},
{name:"小米9",price:4999}
]
},
methods:{
deleteOne:function (index) {
console.log(this)
this.ary.splice(index,1);
},
deleteAll:function () {
this.ary=[];
},
addOne:function () {
//表单中输入内容不为空时，才能添加；
if(this.shopname && this.shopprice){
//如果商品名称重复，则改变其价格，阻止程序执行；
for(var i=0; i<this.ary.length; i++){
if(this.ary[i].name===this.shopname){
this.ary[i].price=this.shopprice;
this.shopname="";
this.shopprice="";
return;
}
}
//当商品名称不重复时，才能改变价格
this.ary.push({
name:this.shopname,
price:this.shopprice
});
//添加后，清空表单中内容；
this.shopname="";
this.shopprice="";
}else{
alert("内容不能为空，请输入内容")
}
},
resetData:function () {
this.shopname="";
this.shopprice="";
}
}
})
</script>
</body>
</html>
