Vue的概述
是一个轻量级 渐进式的 前端框架
特点: 数据驱动 MVVM 组件化
好处: 封装了DOM操作元素的API
基本案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue的入门案例</title>
<!-- 1.导入vue.js,用vue功能 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 准备数据渲染区 {{msg}} 叫插值表达式,是vue的固定语法,获取msg变量的值-->
<div id="app">{{msg}}</div>
<!-- 导入vue.js,vue就提供了Vue的工具,想用就new -->
<script>
//准备数据
var a={
msg:"hello vue"
}
//把数据渲染到挂载点
var com={
el:"#app",//挂载点--通过css提供的id选择器,选中了id=app的元素
data:a//数据--把数据渲染在挂载点
}
//准备Vue对象
new Vue(com);
</script>
</body>
</html>
MVVM的解释:
M:model-数据相当于msg:"hello vue"
V:view-视图相当于<div id="app">{{msg}}</div>
VM:把二者连接起来
简化后的基本案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue的入门案例</title>
<!-- 1.导入vue.js,用vue功能 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 准备数据渲染区 {{msg}} 叫插值表达式,是vue的固定语法,获取msg变量的值-->
<div id="app">{{msg}}</div>
<!-- 导入vue.js,vue就提供了Vue的工具,想用就new -->
<script>
new Vue({
el:"#app",
data:{
msg:"hello Vue--"
}
})
</script>
</body>
</html>
vue中插值表达式的练习
<div id="aaa">
{{name}}
加减乘除:{{age+a}} {{age-a}} {{age*a}} {{age/a}}
{{age%a}}
自增自减:
{{++age}}
{{--age}}
<p>三元运算符:{{age>20?'yes':'no'}}</p>
<p>字符串的操作</p>
{{name.replace('a','322')}} {{name.length}} {{name.concat(123)}} {{name.substr(2)}}
</div>
vue中函数的定义
<div id="x">{{name}}{{eat()}} {{color("蓝色")}} {{add(1,1)}}</div>
<script>
new Vue({
el:"#x",
data:{
name:"da",
age:11
},
methods: {
eat:function(){
console.log("爱吃肉");
},
color:function(color){
console.log("最喜欢:"+color);
},
add:function(age1,age2){
console.log(age1+age2);
}
},
})
</script>
vue中对象和数组的定义及使用
<div id="aa">
<!-- 解析对象保存的数据语法:对象名.属性名 -->
{{name}} {{a.name}} {{a.eat()}} {{array[0].name}}
</div>
<script>
new Vue({
el:"#aa",
data:{
name:"lang1",
age:11,
//对象名 :对象信息
a:{//自定义对象
name:"lang2",
age:12,
eat:function(){
console.log("爱吃饭");
}
},
array:[
{
name:"lang3",
age:13
},
{
name:"lang4",
age:14
}
]
}
})
</script>
data的三种写法
new Vue({
el:"#ea",
data:{
name:"lang"
}
data:function(){
return{
msg:"hi~vue"
}
}
data(){
return{
msg:"hello"
}
}
})
vue中的v-命令(重点)
<!-- 2.闪现的问题:在浏览器上显示了插值表达式 使用v-cloak属性,使用css隐藏效果 -->
<div id="app" v-cloak>
{{addr}}{{addr}}{{addr}}{{addr}}{{addr}}{{addr}}{{addr}}
<!-- v-model数据的双向绑定 -->
<input type="text" v-model="addr"/>
<!-- 3.v-if指令 -->
{{person.age}}
<!-- v-if和v-show的区别?都可以判断后者即使不满足条件也会被网页加载只是隐藏起来了 -->
<p v-if="person.age>=60">老年人</p>
<p v-else-if="person.age>=30">中年人</p>
<p v-else-if="person.age>=18">成年人</p>
<p v-else>未成年</p>
<p v-show="person.age>=18">成年人</p>
<!-- 4.v-for指令 -->
{{hobby[0]}}
<!-- o代表的是取到的数据,i代表的是下标,arr是数组名-->
用v-for获取数组中的元素:<p v-for="o,i in hobby">{{i+1}},{{o}}</p>
<!-- 5.v-on用来绑定事件:点击按钮时触发函数 @是一种简写形式-->
<button v-on:click="show()">点我</button>
<button @click="show()">点我</button>
<button v-on:dblclick="show()">双击</button>
<button @dblclick="show()">双击</button>
<!-- 6.v-bind,用来获取变量的值 -->
<!-- <a href="{{url}}">链接1</a> 错的,把整个的插入值表达式当做字符串了-->
<a v-bind:href="url">链接2</a>
<a :href="url">简写链接3</a>
</div>
<script>
new Vue({
el:"#app",
data:{
addr:"北京",
person:{
age:92,
},
hobby:["唱","跳","rap","篮球"],
url:"http://bd.xitong18.com/"
},
methods: {
show:function() {
console.log("666");
}
},
})
</script>