目录
1、 Vue的特点
1、遵循MVVM模式
2、编码简洁,体积小,运行效率高,适合移动/PC端开发
3、它本身只关注UI,可以引入其它第三方库开发项目
2、与其他JS框架的关联
1、借鉴 Angular 的模板和数据绑定技术
2、借鉴 React 的组件化和虚拟DOM技术
3、 Vue周边库
1、vue-cli:vue脚手架
2、vue-resource
3、axios
4、vue-router:路由
5、vuex:状态管理
6、element-ui:基于vue的UI组件库(PC端
4、初识Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app">
<h1>Hello {{name}}!</h1>
</div>
<script>
new Vue({
//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
el:'#app',
//data用于存储数据,数据共el所指定的容器去使用
data:{
name:'World'
}
})
</script>
</body>
</html>
效果图:
主意:
1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
2、app容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3、app容器里的代码被称为Vue模板
4、Vue实例与容器是一一对应的,真实开发中只有一个Vue实例,并且会配合着组件一起使用
5、{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
6、一旦data中的数据发生变化,那么模板中用到该数据的地方也会自动更新
5、模板语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>插值语法</h1>
<h3>你好,{{name}}!</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">快去看新番!</a><br>
<a :href="url">快去看新番!</a>
</div>
<script>
new Vue({
el:'#app',
data:{
name:'杨乙燃',
url:'https://www.bilibili.com/'
}
})
</script>
</body>
</html>
效果图:
主意:
Vue模板语法包括两大类:
1、插值语法:
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有区域2、指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例:<a v-bind:href="xxx">或简写为<a :href="xxx">,xxx同样要写js表达式,且可以直接读取到data中的所有属性
备注:Vue中有很多的指令,且形式都是v-xxx,此处我们只是拿v-bind举个例子
6、数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
单向数据绑定:<input type="text" v-bind:value="name"><br>
<a><span>{{name}}</span></a><br>
双向数据绑定:<input type="text" v-model="name"><br>
<a><span>{{name}}</span></a>
</div>
<script>
new Vue({
el:'#app',
data:{
name:'杨乙燃'
}
})
</script>
</body>
</html>
效果图:
主意:
1、单向绑定(v-bind):数据只能从data流向页面
2、双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data
3、双向绑定一般都应用在表单类元素上(如:<input>、<select>、<textarea>等)
4、v-model:value可以简写为v-model,因为v-model默认收集的就是value值
7、el与data的两种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello,{{name}}!</h1>
</div>
<script>
//el的两种写法:
//第一种写法
const vm = new Vue({
el:'#app',
data:{
name:'杨乙燃'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello,{{name}}!</h1>
</div>
<script>
//el的两种写法:
const vm = new Vue({
data:{
name:'杨乙燃'
}
})
//第二种写法
vm.$mount('#app')
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello,{{name}}!</h1>
</div>
<script>
//data的两种写法:
new Vue({
el:'#app',
//data的第一种写法:对象式
data:{
name:'杨乙燃'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hello,{{name}}!</h1>
</div>
<script>
//data的两种写法:
new Vue({
el:'#app',
//data的第二种写法:函数式
data(){
return{
name:'杨乙燃'
}
}
})
</script>
</body>
</html>
效果图:
注意:
el有2种写法:
- 创建Vue实例对象的时候配置el属性
- 先创建Vue实例,随后再通过
vm.$mount('#app')
指定el的值data有2种写法:
- 对象式
- 函数式
由Vue管理的函数,一定不要写箭头函数,否则this就不再是Vue实例了