本文详细介绍了Vue的核心概念，包括Vue环境安装、模板语法、数据绑定、事件处理、计算属性与监视、条件渲染、列表渲染等。还涵盖了Vue实例生命周期、内置指令和自定义指令的使用，帮助读者全面理解并掌握Vue.js开发。
文章目录
一、Vue简介
（一）官网
（二）vue环境安装
1、vscode安装
2、vue包下载
在下面地址下载开发版或生产版vue
https://v2.cn.vuejs.org/v2/guide/installation.html
3、script 标签引入vue
VS Code打开一个空的文件夹，新建子文件夹js,将下载好的vue.js复制到js文件夹下，并创建html文件，引入vue
目录结构：
Vue1:js: vue.js
Vue1:vuedemo: vue1.htlm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入vue.js -->
<script src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
浏览器检查是否引入了Vue
输入Vue查看是否引入了Vue，如下图所示即为引入成功
4、浏览器安装vue开发者工具
浏览器有两条提示如下：
1、提示安装开发者工具
2、提示当前为开发版本
1）点击红色框中的超链接安装开发者工具
2）在chrome的扩展程序页面，需要勾选vue-devtools的“允许访问文件地址”项。
3）在浏览器地址栏输入chrome://version/ ，复制个人资料路径
然后进入\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\6.1.4_0 路径，修改manifest.json中的 “persistent”: false 为 “persistent”: true；
4）关闭浏览器所有窗口之后重新打开，就会发现Vue devtools扩展的图标变绿了，按F12也能看到VUE调试界面了。
5、去掉开发版本提示
解决方案：添加 Vue.config.productionTip = false
<script type="text/javascript" src="./js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
6、安装Live Server插件、Vue3 Snippets插件（代码提示插件）
1、安装Live Server插件、Vue3 Snippets插件（代码提示插件）
7、页面图片文件favicon.ico
在跟目录加入一个页面图片文件favicon.ico
在当前页面右键点击OpenLiveServer运行页面，发现加上了页面图片
二、入门案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入vue.js -->
<script src="../js/vue.js"></script>
<title>Document</title>
</head>
<!--
1、想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象
2、box1容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3、box1容器里面的代码称为Vue模板
4、容器和Vue实例之间只能是1：1的关系
5、开发中只有一个Vue实例
6、{
{}}中可以写js表达式，并且可以读取到data中的所有属性
7、一旦data中的数据发生变化，页面中用到该数据的地方也会自动更新
-->
<body>
<!-- 准备好一个容器，用于与Vue对象绑定 -->
<div id="box1">
{
{school.toUpperCase()}},{
{number}},{
{address}},{
{Date.now()}}
</div>
<script type="text/javascript">
// 创建Vue实例
new Vue({
el:'#box1', //el用户指定当前Vue实例为哪个容器服务，指通常是css选择器字符串
data:{
//data中用户存储数据，数据提供el指定的容器使用
school:'buba',
number: 500,
address:'昌平'
}
})
</script>
</body>
</html>
三、模板语法
- 插值语法
- 指令语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="box1">
<!-- 插值语法：
功能：用于解析标签体内容
写法：{
{xxx}} xxx是js表达式，且可以直接读取饿到data中的所有属性
-->
<h1>{
{school.toUpperCase()}},{
{number}},{
{address}},{
{Date.now()}}</h1>
<!--
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）
举例：v-bind:href="xxx" 简写 :href="xxx" xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中很多指令，这里只是举例
-->
<a v-bind:href="url">baidu</a><br/>
<!-- 简写，可以去掉v-bind 只用一个：冒号 -->
<a :href="url">baidu</a><br/>
<a v-bind:href="url.toUpperCase()">baidu</a><br/>
<a :href="url">{
{info.name}}</a><br/>
</div>
<script type="text/javascript">
new Vue({
el:'#box1',
data:{
url:'http://www.baidu.com',
school:'buba',
number: 500,
address:'昌平',
info:{
des:'描述信息',
name:'名字'
}
}
})
</script>
</body>
</html>
四、数据绑定
Vue中的两种数据绑定方式：
1、单向数据绑定v-bind:数据从data流向页面
2、双向数据绑定v-model:数据在data和页面之间双向流动
备注：
- 双向绑定一般都应用在表单元素上（input、select等）
- v-model:value 可以简写为v-model，因为v-model默认收集的就是value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="box1">
单向数据绑定：<input type="text" v-bind:value="address"/>
双向数据绑定：<input type="text" v-model:value="address"/>
<hr/>
简写单向数据绑定：<input type="text" :value="address"/>
简写双向数据绑定：<input type="text" v-model="address"/>
<!-- 下面代码错误，因为 v-model 只用应用在表单类元素上-->
<!-- <h1 v-model="address">h1标签</h1> -->
</div>
<script type="text/javascript">
new Vue({
el:'#box1',
data:{
address:'昌平'
}
})
</script>
</body>
</html>
五、el与data的两种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="box1">
{
{name}}
</div>
<!-- 写法1：对象式 -->
<!-- <script type="text/javascript">
new Vue({
el:'#box1',
data:{
address:'昌平'
}
})
</script> -->
<!-- 写法2:函数式 -->
<!-- <script type="text/javascript">
const v = new Vue({
data:function(){
console.log('aaa',this)//这里的this是当前Vue实例
return{
name:'zhangsan',
address:'changping'
}
}
})
v.$mount('#box1')
</script>-->
<!-- 函数式 data函数简写 -->
<!-- <script type="text/javascript">
const v = new Vue({
data(){
console.log('aaa',this)//这里的this是当前Vue实例
return{
name:'zhangsan',
address:'changping'
}
}
})
v.$mount('#box1')
</script> -->
<!-- 函数式 箭头函数 -->
<script type="text/javascript">
const v = new Vue({
data:()=>{
console.log('aaa',this)//这里的this是window对象不是Vue对象
return{
name:'zhangsan',
address:'changping'
}
}
})
v.$mount('#box1')
</script>
</body>
</html>
六、MVVM模型
七、数据代理
（一）回顾Object.defineproperty方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>回顾Object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript" >
let number = 18
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('有人读取age属性了')
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是',value)
number = value
}
})
// console.log(Object.keys(person))
console.log(person)
</script>
</body>
</html>
（二）数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>何为数据代理</title>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript" >
let obj = {
x:100}
let obj2 = {
y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
</body>
</html>
（三）Vue中的数据代理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue中的数据代理</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>学校名称：{
{name}}</h2>
<h2>学校地址：{
{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
name:'BUBA',
address:'宏福科技园'
}
})
</script>
</html>
六、事件处理
（一）绑定监听
- v-on:xxx=“fun”
- @xxx=“fun”
- @xxx=“fun(参数)”
- 默认事件形参: event
- 隐含属性对象: $event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"
最低0.47元/天 解锁文章
扫一扫
8193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
