作者：Sam
1. 简介
Vue是一个渐进式框架
这里介绍Vue的安装与基本使用案例
2. 安装
vue可以使用导入js的方式安装
也可以使用脚手架工具安装
2.1 导入js文件安装
-
下载js文件并导入
vue的js文件分为开发版和生成版- 开发版中会有代码提示
- 生成版中没有代码提示
<script src="js/vue.js"></script>
- 使用cdn在线导入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
【注意】如果使用的是开发版js文件，页面console中会有使用开发者的提示，需要执行以下配置，来关闭开发版提示
Vue.config.productionTip=false
2.2 npm安装
去看《vue-脚手架基础》
2.3 脚手架工具安装
去看《vue-脚手架基础》
3. 安装Vue_Devtools
Vue_Devtools用于检测页面是否使用vue
是安装在chrome浏览器上的工具
安装时直接拖入扩展工具即可
下载地址
https://pan.samland.club/s/cobyoK2H5t6tqwy
【注意】如果不安装Vue_Devtools工具，在使用开发版js包的时候，会有安装工具的提示
4. 插值语法
4.1 语法简介
-
插值语法一般用于标签体内部，即innerHTML部分的内容
-
js语法
// 定义一个vue实例
new Vue({
el: '#div1',
data: {
name: 'Sam',
password: '123456',
content: 'hello world'
}
})
- el：是一个选择器，指向html页面中的元素
- data：用来保存数据
- 对于同一个dom元素，只有第一个vue实例会起作用
- html语法
<div id='div1'>
<h1>{{name}}</h1>
<p>{{content.toUpperCase()}}
</div>
- name/content：js中data中的数据的key
- 在
{{}}中，可以使用有返回值的js表达式来对数据进行处理，如示例中的toUpperCase()
4.2 示例
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="favicon.ico">
<script src="js/vue.js"></script>
<title>001</title>
</head>
<body>
<div class="test1" id="test1">
<h3>Hello {{name}}</h3>
<p>{{content.toUpperCase()}}</p>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el: '#test1',
data: {
name: "Sam",
content: 'hello world'
}
})
</script>
</html>
5. 指令语法
5.1 语法简介
- vue中使用
v-xxx的形式来使用指令语法 - 指令语法可以用于
- 标签属性
- 标签体内容
- 绑定事件
语法
<h3>{{school.name}}</h3>
<a v-bind:href="school.url">{{school.name.toUpperCase()}}</a>
Vue.config.productionTip = false
new Vue({
el: '#test1',
data: {
name: "Sam",
content: 'hello world',
school:{
name: 'SSPU',
url: 'http://www.sspu.com'
}
}
})
-
v-bind:后的属性，会调用vue实例data中的数据 -
v-bind:可以直接简写为:，如
<a :href="school.url">
- 指令语法中的数据，同样可以使用js表达式来对数据进行处理，例如使用toUpperCase方法来转换为大写
<a :href="school.url.toUpperCase()">{{school.name}}</a>
5.2 示例
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="favicon.ico">
<script src="js/vue.js"></script>
<title>001</title>
</head>
<body>
<div class="test1" id="test1">
<h3>Hello {{name}}</h3>
<p>{{content.toUpperCase()}}</p>
<hr>
<h3>{{school.name}}</h3>
<a :href="school.url">{{school.name.toUpperCase()}}</a>
</div>
</body>
<script src="js/001.js"></script>
</html>
// 001.js
Vue.config.productionTip=false
new Vue({
el: '#test1',
data:{
name: "Sam",
content: 'hello world',
school:{
name: 'sspu',
url: 'http://www.sspu.com'
}
}
})
6. 模板语法的本质
插值语法与指令语法称为模板语法
模板语法中调用的值，例如
<div id='test1'>
<span>{{username}}</span>
</div>
const vm = new Vue({
el: '#test1',
data: {
username: 'James'
}
})
本质上是访问vm对象的属性
vue会自动将data中的kv，映射到vm对象中
网友评论