vue的基本使用总结一
vue的基本使用
<head>
<!-- 1.先引入vue核心文件-->
<script src="vue.js"></script>
</head>
<body>
<!--在el属性对象的标签中 填写正确的vue语法展示或者控制数据-->
<div id="app">
{{message}}
</div>
<script>
//2.对vue核心对象vm进行实例化
var vm=new Vue({
el:"#app",//接下来vue要操作的元素的选择符
data:{//保存一些前端使用的数据
message:"hello world",
},
});
</script>
</body>
JQuery与vue定位不一样
jquery获取元素完成特效
vue的定位是方便操作和控制数据完成特效
vue的使用三个注意事项
1.一个html页面中可以存着多个vue实例对象 但是实例对象的变量名唯一
2.js所有变量和语法区分大小写 new Vue()
3.建议实例化vue对象的代码写在body的最后面 免得出现html元素无法获取的错误出现
django MVT模型 model view template
vue M-V-VM思想 Model-View-ViewModel 双向数据绑定
<!--V.View视图模板-->
<div id="app">
<input v-model="message"><br>
{{message}}
</div>
<script>
//new Vue VM对象 负责时刻保证视图模板中的数据和data里面的数据一致
var vm=new Vue({
el:"#app",
data:{//M.Model 模型
message:"hello world",
},
});
</script>
网页控制台输入
vm
vm.message
vm.message="你好"
v-if v-model v-for
<div id="d1">
<a :href="url">百度</a>
</div>
<script>
var vm=new Vue({
el:"#d1",
data:{
url:"http://www.baidu.com",
},
})
</script>
显示密码
<div id="d1">
<a :href="url">百度</a><br>
密码: <input :type="type" v-model="password"><button @click="change">{{msg}}密码</button>
</div>
<script>
//data里面的属性 和methods里面的方法都会被加载到vm对象里面充当属性和方法
var vm=new Vue({
el:"#d1",
data:{
type:"password",
password: "",
url:"http://www.baidu.com",
},
methods:{
change(){//change:function(){的简写
if(this.type=="password"){this.type="text",this.msg="显示"}
else{this.type="password",this.msg="隐藏"}//这里的this表示vm对象
}
}
})
</script>
样式操作
<div id="box">
<div style="color:red;">这是普通样式</div>
<div :style="{color:fc,backgroundColor:gc}">vue修改样式值</div>
<div :style="sty1">vue修改样式值 值是对象名</div>
<div :style="[sty1,sty2]">vue修改样式值 值是数组</div>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
fc:"red",
gc:"purple",
sty1:{
color:"yellow",
backgroundColor:"green",
},
sty2:{
fontSize:"32px",
border:"1px solid #fff",
},
}
})
</script>
列表循环
<div id="box">
<table border="1" align="center" width="600px">
<tr>
<th>序号</th>
<th>商品编号</th>
<th>商品标题</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
<tr v-for="goods ,index in goods_list">
<td>{{index+1}}</td>
<td>{{goods.id}}</td>
<td>{{goods.title}}</td>
<td>{{goods.price}}</td>
<td>{{goods.num}}</td>
</tr>
</table>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
goods_list:[
{id:10,title:"商品1",price:100,num:65},
{id:11,title:"商品2",price:120,num:45},
{id:13,title:"商品3",price:130,num:15},
{id:14,title:"商品4",price:50,num:23},
{id:15,title:"商品5",price:70,num:75},
],
}
})
</script>
v-show与v-if的区别
1.v-show 后面不能v-else或v-else-if
2.v-show 隐藏元素时 使用的是display:none来隐藏的，而v-if 直接从html 文档中移除元素[dom操作中的remove]
<div id="box">
<p v-show="is_show">一段文本</p>
<p v-if="is_show">一段文本2</p>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
is_show:true,
}
})
</script>
jQuery和vue定位不一样
jQuery的定位是获取元素完成特效
vue的定位是方便操作和控制数据和完成特效
vue 使用两种模式 脚本化导入和组件化开发
1.纯文本数据{{}} 2.表单标签中输出表单的值 v-model
3.如果输出的内容含html代码则需要v-html
过滤器 全局过滤器 局部过滤器
<p>{{price|format}}</p>//过滤器的使用
//全局过滤器
Vue.filter("过滤器函数名",function(money){
return money.toFixed(2);js中提供toFixed方法可以保留两位小数
})
全局过滤器可以单独写在一个文件里面 外部进行调用
局部过滤器 针对当前Vm 对象中使用
var vm=new Vue({
el:"#box",
data:{
price:7.899,
},
filters:{
format(money){
return money.toFixed(2)+"元";
}
}
})
计算属性 相当于创建一个新的变量保存数据计算的结果
<div id="box">
<p><input type="text" v-model="num1">+ <input type="text" v-model="num2">=
<span>{{total}}</span>
</p>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{
num1:0,
num2:0,
},
computed: {
total(){
return parseFloat(this.num1)+parseFloat(this.num2);
}
}
})
</script>
对于js而言用户在表单中输入的所有数据都是字符串
parseInt 把数据转换成整数
parseFloat 把数据转换成浮点数
监听属性 监听属性变化
watch 监听属性 监听指定变量的值是否发生变化 当值发生变化时 调用对应的方法
<button @click="num++">赞{{num}}</button>
watch:{
num(v1,v2){
if(this.num>5){
this.num=5;
}
console.log(this.num,"修改前",v2,"修改后",v1);
}
}
vue生命周期
created(){//实现到服务端获取页面数据}
mounted(){//修改页面内容[页面特效]}
vue本质js
事件冒泡 事件特效 指js中子元素的事件触发以后 会导致父级元素的同类事件一并被触发到
事件冒泡有好处也有坏处
<div id="box">
<div class="box2" >
<div class="box1" ></div>
</div>
</div>
<script>
var box1=document.getElementsByClassName("box1")[0];
var box2=document.getElementsByClassName("box2")[0];
box1.onclick=function (event) {//事件对象
alert("点击了box1")
console.log(event);
event.stopPropagation();//阻止事件冒泡
};
box2.onclick=function () {
alert("点击了box2")
};
</script>
return false 是jQuery里面的方案
<ul id="app">
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
</ul>
<script>
//批量元素绑定 可以通过事件委托来提升性能
var list=document.getElementById("app").children;
for(var i in list){
list[i].onclick=function () {
console.log(this.innerHTML);
}
}
</script>
//事件委托提升性能
var ul=document.getElementById("app");
ul.onclick=function (event) {
var self=event.target;
console.log(self.innerHTML)
}
Vue中阻止事件冒泡
<style>
.box1{
width:200px;
height:200px;
background-color: pink;
margin: auto;
}
.box2{
width:400px;
height:400px;
background-color: wheat;
padding-top: 50px;
}
</style>
<div id="app">
<div class="box2" @click="show('点击了box2')">
<div class="box1" @click.stop="show('点击了box1')"></div>
</div>
</div>
<script>
//vue本质就是js 所有vue中的事件操作也会存在冒泡现象
//可以使用辅助指令 @click.stop来阻止事件冒泡
var vm=new Vue({
el:"#app",
methods:{
show(message){
alert(message);
}
}
})
</script>
阻止页面刷新
<div id="app">
<a :href="url" @click.prevent>百度</a>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
url:"http://www.baidu.com"
},
})
</script>
