vue基础
1.导入开发版本的vue.js
<script src='./lib/vue.js'></script>
3.使用简洁的模板语法把数据渲染到页面上去
<div id='app'>
{{ msg }}
</div>
2.创建vue实例对象，设置el属性和data属性
<script>
var vm=new Vue({
el:'#app',
data:{
msg:"hello vue"
},
methods:{
}
})
</script>
el挂载点
el是用来设置vue实例挂载（管理）的元素
1.vue实例的作用范围是什么？
答：vue会管理el选项命中的元素及其内部的后代元素
2.是否可以使用其他的选择器？
答：可以，但建议使用ID选择器
3.是否可以设置其他的dom元素呢？
答：可以使用其他的双标签，不能使用HTML和BODY
data数据对象
1.vue中用到的数据定义在data中 2.data中可以写复杂类型的数据
data:{
msg:"hello",
school:{
name:"信息",
mobile:"123-456"
},
campus:["北京","上海","南京"]
}
3.渲染复杂类型的数据时，遵守js的语法即可
<div id='app'>
{{msg }}
<h2>{{ school.name }} {{school.mobile}} </h2>
<ul>
<li>{{campus[0]}} </li>
<li>{{campus[2]}} </li>
</ul>
</div>
v-text指令
1.v-text指令的作用是：设置标签的内容（textContent）
2.默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
3.内部支持写表达式
<div id='app'>
<h2 v-text="msg+'!'">深圳</h2>
<h2>{{ msg +"!"}}深圳</h2>
</div>
v-html指令
1.v-html指令的作用是：设置元素的innerHTML 2.内容中有html结构会被解析为标签 3.v-text指令无论内容是什么，只会解析为文本
<div id='app'>
<p v-html="content"></p>
<p v-text="content"></p>
</div>
data:{
content:"<h1> h1 </h1>"
}
效果：
v-on指令
1.v-on指令的作用是：为元素绑定事件
<input type="button" value="v-on指令" v-on:click="doIT">
2.事件名不需要写on
<input type="button" value="双击事件" @dblclick="doIT">
3.指令可以简写为@
<input type="button" value="v-on简写" @click="doIT">
4.绑定的方法定义在methods属性中
5.方法内部通过内部this关键字可以访问定义在data中的数据
<h2 @click="changeFood">{{ food }}</h2>
methods:{
doIT:function(){
alert("做IT");
},
changeFood:function(){
this.food+="好好吃！！"
}
}
计数器
<div id='app'>
<div>
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
if(this.num<10){
this.num++;
}else{
alert("别点了，最大啦")
}
},
sub:function(){
if(this.num>0){
this.num--;
}else{
alert("别点了，最小啦")
}
}
}
})
</script>
-
1.创建vue实例时：el(挂载点)，data(数据)，methods(方法)
-
2.v-on指令的作用是事件绑定，简写为@
-
3.方法中通过this，关键字获取data中的数据
-
4.v-text指令的作用是：设置元素的文本值，简写为{{}}
-
5.v-html指令的作用是：设置元素的innerHTML
v-show指令
- v-show指令的作用是：根据真假切换元素的显示状态
- 原理是修改元素的display，实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
<div id='app'>
<input type="button" value="切换显示状态" @click="changIsShow">
<input type="button" value="累加年龄" @click="add">
<img v-show="isShow" src="./img/a.png" alt="">
<img v-show="age>=18" src="./img/a.png" alt="">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
isShow:false,
age:17
},
methods:{
changIsShow:function(){
this.isShow=!this.isShow;
},
add:function(){
this.age++;
}
}
})
</script>
