Vue基础入门！ – 小飞侠

其实学习vue的最好方式就是查看官方文档：Vue.js

1.Vue是一个JavaScript框架	框架：别人写好的js文件
2.作用：构建用户页面	将数据渲染到页面
3.特点：渐进式	组件式开发

1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
- Vue是一个JavaScript框架
  - Vue是一个用于构建用户页面的框架
    - Vue是一个用于构建用户界面得渐进式框架
2.渐进式框架介绍
- a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的
  - 类似于Nodejs,拆分成很多个小模块
- b. 在项目中我们用到什么，就导入什么
  - 这样可以保证我们用到的最少
- c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源

1.2-Vue两个重要特点

数据驱动

1.数据驱动：Vue会根据数据，自动渲染页面
- 无需DOM操作，修改了对象中的数据，页面会自动渲染
- Vue的底层使用了一种叫做虚拟DOM的技术，能够实时监听js对象的属性变化从而自动更新页面DOM元素
  - 虚拟DOM本质是一个js对象
  - 关于虚拟DOM了解传送门(难度较大，可以留着以后进阶学习)
    - 虚拟dom原理 – 简书
    - 虚拟DOM（Virtual DOM）的工作原理 – 简书

原始的前端开发	Vue.js的前端开发
1.使用HTML+CSS搭建页面	1.使用HTML+CSS搭建页面
2.使用异步请求技术向后台请求数据	2.使用异步请求技术向后台请求数据
3.使用原生的js或者jQuery操作DOM，渲染数据	`3.Vue自动渲染数据`

效果演示

2-组件化开发(盒子复用)

2.组件化开发：网页中的某一个部分,可能需要在多个地方被重复使用，就可以定义成一个组件
- 组件化开发好处
  - a. 一次定义，多处使用
  - b. 便于开发维护
    - 类似于我们之前的函数封装解决代码冗余问题。Vue.js可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件

1.3-Vue基本使用

官方文档传送门：Vue官方文档
第三方框架通用的使用步骤
- 1.导包
- 2.写HTML结构
- 3.js中初始化配置

<!DOCTYPE html>
<html lang=”en”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<!– 1.导包 –>
<script src=”./vue.js”></script>
</head>

<body>
<!– 2.HTML结构 –>
<div id=”app”>
{{ message }}
<br>
{{ name }}
<br>
{{ age }}
<br>
{{ sex }}
</div>

</html>

1.4-Vue的挂载点介绍

1.挂载点el作用：告诉vue实例，你要将data中的数据渲染到哪一个视图
2.注意点
- (1)挂载点可以使用 id选择器（vue推荐使用）类选择器标签选择器
  - 开发中基本上都是id选择器，保证HTML标签唯一性
  - 如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中
- (2)如果选择器选中了多个元素，只会选择第一个元素
- (3)挂载点不能设置为html和body标签（程序报错）
- <!DOCTYPE html>
  <html lang=”en”>
  
  <head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <!– 1.导包 –>
  <script src=”./vue.js”></script>
  </head>
  
  <body>
  <!– 2.HTML结构 –>
  <div id=”hm”>
  <div id=”app”>
  {{ message }}
  </div>
  
  <hr>
  <div id=”box” class=”container”>
  {{ message }}
  </div>
  
  <hr>
  <div class=”container”>
  {{ message }}
  </div>
  </div>
  
  <script>
  /* 3.初始化配置 */
  /*
  (1)Vue是导入vue.js之后得到的一个全局构造函数
  (2)调用Vue构造函数创建一个vue实例对象
  */
  let app = new Vue({
  //el: element 用来设置vue实例的挂载点（将数据渲染到哪个元素身上）
  /*
  (1)挂载点可以使用 id选择器（vue推荐使用）类选择器标签选择器
  (2)如果选择器选中了多个元素，只会选择第一个元素
  (3)挂载点不能设置为html和body标签（程序报错）
  */
  el: ‘#hm’,
  //data: 要渲染的数据
  /* 数据驱动：vue会根据data中的数据，自动渲染页面(无需DOM操作) */
  data: {
  message: ‘Hello Vue!’
  }
  })
  </script>
  </body>
  
  </html>
1.5-Vue的插值表达式介绍
插值表达式 有点类似于以前学习的 art-template模板语法，但是不同的框架有自己不同的语法规则
1.Vue会自动将data对象中的数据渲染到视图
2.在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置
3.关于插值表达式一些注意点
- (1) {{ }} : 插值表达式，也叫胡子语法
- (2) 插值表达式作用：将数据渲染到页面
- (3) 支持二元运算 {{ age + 1 }}
- (4) 支持三元运算 {{ age>30?’老男人’:’小鲜肉’ }}
- (5) 支持数组与对象的取值语法
- (6) 不支持分支语法与循环语法

<!DOCTYPE html>
<html lang=”en”>

<body>
<!– 2.HTML结构 –>
<div id=”app”>
名字： {{ name }} <br>
年龄： {{ age + 1 }} <br>
介绍： {{ age>30?’大叔’:’欧巴’ }} <br>
女朋友：{{ girlFried[1] }} <br>
女儿： {{ daughter.name }} <br>

</div>

</html>

Vue指令介绍

1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性
- a. 每一个HTML标签都有自己的原生默认属性
  - HTML标签的每一个属性都有自己独特的功能
  - 例如 img标签的src属性，a标签的href属性
- b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能
2.在Vue中每一个指令都是以v-开头（用于区分HTML标签原生属性）
- 语法： 指令名=“指令值”
  - 例如 v-text = msg
3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。

`<img src="./images/logo.png" alt="图片不存在时的文本" title="鼠标悬停文本" v-on:click = "doClick">`
`src"` : 原生属性，设置图片的路径
`alt` : 原生属性，设置图片不存在时的文本
`title`：原生属性，设置鼠标悬停文本
`v-on:click`:vue给img标签新增的属性, 给元素绑定点击事件

v-text指令
a.作用：设置元素的文本 innerText
b.与插值表达式区别
v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
{{ }} 只会替换当前位置文本
–>
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<!– 导包 –>
<script src=”./vue.js”></script>
</head>

<body>

<!– HTML结构 –>
<div id=”app”>
<p v-text=”msg”>彩蛋超多</p>
<p v-text=”msg1″>彩蛋超多</p>
<p>我爱你： {{ msg }}</p>
</div>
<!–
1.学习目标： v-text 指令
2.学习路线
a.作用：设置元素的文本 innerText
b.与插值表达式区别
v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
{{ }} 只会替换当前位置文本

–>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: ‘#app’,
//data: 要渲染的数据
data: {
msg: ‘我是张三!’,
msg1:'<h1>程序员</h1>’
}
})
</script>
</body>
</html>
v-html指令
作用：设置元素的innerHTM
–>
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<!– 导包 –>
<script src=”./vue.js”></script>
</head>

<body>

<!– HTML结构 –>
<div id=”app”>
<p v-text=”msg”>要爱学习</p>
<p v-text=”msg1″>要爱学习</p>
<p v-html=”msg1″>要爱学习</p>
</div>
<!–
1.学习目标： v-html 指令
2.学习路线
作用：设置元素的innerHTM
–>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: ‘#app’,
//data: 要渲染的数据
data: {
msg: ‘我是张三!’,
msg1:'<h1>程序员</h1>’
}
})
</script>
</body>
</html>

v-on指令（绑定事件）

a.作用：给元素绑定事件
b.语法：
标准语法： v-on:事件名 = “方法名”
简洁语法： @事件名 = “方法名”
c.注意点
事件名就是原生事件名去掉on
事件方法定义在vue实例的methods对象中
–>

<!DOCTYPE html>
<html lang=”zh-CN”>

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<!– 导包 –>
<script src=”./vue.js”></script>

<body>

<!– HTML结构 –>
<div id=”app”>
<button v-on:click=”doClick”>点我</button>
<div class=”box” v-on:mouseenter=”doEnter” v-on:mouseleave=”doLeave”></div>
<hr>
<div class=”box” @mouseenter=”doEnter” @mouseleave=”doLeave”></div>
</div>
<!–
1.学习目标： v-on 指令
2.学习路线
a.作用：给元素绑定事件
b.语法：
标准语法： v-on:事件名 = “方法名”
简洁语法： @事件名 = “方法名”
c.注意点
事件名就是原生事件名去掉on
事件方法定义在vue实例的methods对象中
–>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: ‘#app’,
//data: 要渲染的数据
data: {

},
//method:注册事件的方法名
methods: {
doClick: function () {
alert(‘我被点击了’);
},
doEnter: function () {
console.log(‘鼠标移入我了’);

},
doLeave: function () {
console.log(‘鼠标移出我了’);
}
},
})
</script>
</body>

</html>

vue事件修饰符

a.作用：限定事件触发行为（例如阻止冒泡，阻止默认行为等）
b.语法： @事件名.修饰符 = “方法名”
–>

<!DOCTYPE html>
<html lang=”zh-CN”>

.son{

width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>

<body>

<!– HTML结构 –>
<div id=”app”>
<div class=”father” @click.once=”fatherClick”>
我是father
<div class=”son” @click.stop=”sonClick”>我是son</div>
</div>

<!– 输入框： enter键 –>
<!– <input type=”text” @keyup.13=”doUp”> –>
<!– 用enter,易读 –>
<input type=”text” @keyup.enter=”doEnter”>
</div>
<!–
1.学习目标：事件修饰符
2.学习路线
a.作用：限定事件触发行为（例如阻止冒泡，阻止默认行为等）
b.语法： @事件名.修饰符 = “方法名”
–>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: ‘#app’,
//data: 要渲染的数据
data: {

},
//method:注册事件的方法名
methods: {
fatherClick: function () {
console.log(‘我是父元素’);
},
sonClick: function () {
console.log(‘我是子元素’);

},
doSubmit: function () {
console.log(‘提交按钮’);
},
doEnter:function(){
console.log(‘按了enter键’)
}
},
})
</script>
</body>

</html>

vue方法中的this

1.vue事件方法中的this指向： vue实例
2.vue事件方法中访问data对象中的成员 : this.属性名
- vue会将data对象与methods对象中的成员 平铺到 vue实例中
3.注意点：如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<!– 导包 –>
<script src=”./vue.js”></script>
</head>

<body>
<!– HTML结构 –>
<div id=”app”>
{{ msg }} <br>
<button @click=”doClick”>点我啊</button>
<br>

我的年龄：{{ age }}
<button @click=”age++”>我要成长</button>

</div>

<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: ‘#app’,
//data: 要渲染的数据
data: {
msg: ‘我是张三!’,
age:32
},
methods: {
/*
1. vue事件方法中的this指向： vue实例
2. vue事件方法中访问data对象中的成员 : this.属性名
* vue会将data对象与methods对象中的成员平铺到 vue实例中
3. 注意点：如果事件处理代码没有写到methods中，而是在行内则不需要this
就可以访问data对象中的成员
*/
doClick:function(){
console.log(this);
//在这个事件中，如何获取data里面的成员呢？
//console.log(this.data.msg);//报错无法获取
console.log(this.msg);// vue会将data与methos中的成员平铺到vue实例中
this.msg = ‘爱你么么哒’;
},
doClick1:function(){
this.age++;
}
},
})
</script>
</body>
</html>
vue事件传参
1.vue中每一个事件方法都有一个默认参数，就是事件对象
2.如果主动给事件传参，则传递的参数会覆盖默认参数
3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event
- v-on:click="doClick($event,自定义参数)"
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <script src="./vue.js"></script>
  
  <style> .box{ width: 100px; height: 100px; background-color: red; } </style> </head>
  
  <body>
  
   <div id="app"> {{ msg }} <div class="box" @click="boxClick(10)"></div> <br> <span v-text="news.title"></span> <button @click="deleteClick(news.id)">删除</button> <button @click="editClick($event,news.id)">编辑</button> </div>
  
  <script> /* 创建vue实例 */ let app = new Vue({ //el:挂载点 el: '#app', //data: 要渲染的数据 data: { msg: '我是张三!', news:{ title:'港独分子的下场就是牢底坐穿!', id:10 } }, methods: { /* 1.vue中每一个事件方法都有一个默认参数，就是事件对象 2.如果主动给事件传参，则传递的参数会覆盖默认参数 3.如果希望传递事件对象 + 自定义参数，则可以使用 $event */ boxClick:function(e){ console.log(e); }, deleteClick:function(id){ console.log(`id为${id}的文章被删除`); }, editClick:function(e,id){ console.log(e); console.log(id); } }, }) </script> </body> </html>
- v-bind指令 (绑定标准属性的值)
- 默认情况下，HTML标签原生属性无法获取vue中的数据
- 如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令
- v-bind指令基本使用
  
  a.作用：设置HTML标签原生属性的值
  b.语法：
  标准语法： v-bind:原生属性名 = “属性值”
  简洁语法： :原生属性名 = “属性值”
  –>
- <!DOCTYPE html> <html lang="zh-CN">
  
  <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <script src="./vue.js"></script> </head>
  
  <body>
  
   <div id="app">  <img v-bind:src="imagePath" v-bind:title="imageTitle" alt=""> </div>  <script> /* 创建vue实例 */ let app = new Vue({ //el:挂载点 el: '#app', //data: 要渲染的数据 data: { imagePath:'./images/logo.png', imageTitle:'程序员' } }) </script> </body>
  
  </html>
  
  vue样式绑定
  
  v-bind 可以简写成 :
- v-bind:class="{ '类名': bool, '类名': bool ......}" 如果值为true 该类样式就会被应用在元素身上, false则不会注意点：如果类名有 - ，则需要使用引号包起来
- <!DOCTYPE html> <html lang="zh-CN">
  
  <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <script src="./vue.js"></script> <style> div>div { width: 100px; height: 100px; border: 1px solid #000; margin-top: 20px; }
  
  .red-box { background-color: red; }
  
  .blue-box { background-color: blue; }
  
  .greenBorder { border: 10px solid green; } </style> </head>
  
  <body>
  
   <div id="app"> 
  
   <button @click="changeClass">切换样式</button> <div :class="{ greenBorder: true, 'blue-box': flag }"></div> <hr> </div> <script> /* 创建vue实例 */ var app = new Vue({ //el:挂载点 el: '#app', //data: 要渲染的数据 data: { flag:true, }, methods: { changeClass:function(){ this.flag = !this.flag; } }, }) </script> </body>
  
  </html>
  
  vue指令案例：购物车加减
  
  Vue编程思维
- (1)写页面结构 HTML+CSS
- (2)分析页面需要显示什么数据，将其保存在vue实例的data对象中
- (3)在页面视图中使用插值语法或者指令显示data中的数据
- <!DOCTYPE html>
  <html lang=”zh-CN”>
  
  <head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0″>
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <!– 导包 –>
  <script src=”./vue.js”></script>
  <style>
  .input-num {
  width: 180px;
  height: 40px;
  border: 1px solid gray;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  }
  
  .input-num button {
  width: 50px;
  height: 100%;
  font-size: 25px;
  color: gray;
  cursor: pointer;
  }
  
  .input-num span {
  height: 100%;
  border: 1px solid gray;
  flex: 1;
  text-align: center;
  line-height: 40px;
  }
  
  .input-num button.disabled {
  cursor: not-allowed;
  color: #ccc;
  }
  </style>
  </head>
  
  <body>
  
  <!– HTML结构 –>
  <div id=”app”>
  <!– 计数器 –>
  <div class=”input-num”>
  <button @click=”num–” :disabled=”num==0″ :class=”{disabled:num==0}”>
  –
  </button>
  <span>{{ num }}</span>
  <button @click=”num++” :disabled=”num==10″ :class=”{disabled : num==10}”>
  +
  </button>
  </div>
  </div>
  
  <script>
  /* 创建vue实例 */
  let app = new Vue({
  //el:挂载点
  el: ‘#app’,
  //data: 要渲染的数据
  data: {
  num: 0,
  }
  })
  </script>
  </body>
  
  </html>
- v-for指令(列表渲染)
- 遍历数组语法：v-for="(value,index) in arr"
  - value:数组元素
  - index:数组下标
- 遍历对象语法：v-for="(value,key,index) in obj"
  - 该语法使用较少，了解即可
  - value:对象属性值
  - key:对象属性名
  - index:下标
- (1)作用：遍历数组，并重复生成对应长度的相同标签
  (2)语法： v-for=”item in 数组名”
  遍历下标： v-for=”(item, index) in items”
  (3)细节：这个指令写在哪一个元素身上，就重复生成哪一个元素
  –>
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>  <script src="./vue.js"></script> </head>
  
  <body>
  
   <div id="app"> <li v-for="(item,index) in list" @click="doClick(item)"> 这是第{{index}}个li元素： {{ item }} </li> </div>  <script> /* 创建vue实例 */ let app = new Vue({ //el:挂载点 el: '#app', //data: 要渲染的数据 data: { list:[ '小明', '小强', '小花', '小坤', '小老弟' ] }, methods: { doClick:function(item){ alert(item); } }, }) </script> </body> </html>
  
  v-model指令(双向数据绑定)
  
  双向数据绑定基本使用
- v-model只能用于表单元素!
- v-model只能用于表单元素!
- v-model只能用于表单元素!
- 双向数据绑定
  - 表单元素的值进行了修改，这个变量的值也会跟着修改
  - 这个变量的值进行了修改，表单元素的值也会跟着修改
- (1)作用：双向数据绑定
  a. 表单元素的值进行了修改，这个变量的值也会跟着修改
  b. 这个变量的值进行了修改，表单元素的值也会跟着修改
  (2)语法： v-model=”变量名”
  (3)注意点：
  a. v-model只能用于表单元素
  b. 变量名要定义在data对象中
  –>
- <!DOCTYPE html>
  <html lang=”zh-CN”>
  <head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0″>
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <!– 导包 –>
  <script src=”./vue.js”></script>
  <style>
  span{
  font-size: 20px;
  color: red;
  }
  </style>
  </head>
  
  <body>
  
  <!– HTML结构 –>
  <div id=”app”>
  <input type=”text” v-model=”name”>
  <p>我的名字是: <span>{{ name }}</span></p>
  <button @click=”doClick”>点我修改model</button>
  </div>
  <!–
  1.学习目标： v-model 指令
  2.学习路线
  (1)作用：双向数据绑定
  a. 表单元素的值进行了修改，这个变量的值也会跟着修改
  b. 这个变量的值进行了修改，表单元素的值也会跟着修改
  (2)语法： v-model=”变量名”
  (3)注意点：
  a. v-model只能用于表单元素
  b. 变量名要定义在data对象中
  –>
  <script>
  /* 创建vue实例 */
  let app = new Vue({
  //el:挂载点
  el: ‘#app’,
  //data: 要渲染的数据
  data: {
  name:”
  },
  methods: {
  doClick:function(){
  this.name = ‘张三’;
  }
  },
  })
  </script>
  </body>
  </html>
- 双向数据绑定的意义
  
  双向数据绑定的意义
- 可以让我们快速的得到表单元素的值
- 可以让我们快速的设置表单元素的值
  - 双向绑定技术的底层原理是：js属性拦截
- <!DOCTYPE html>
  <html lang=”zh-CN”>
  <head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0″>
  <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
  <title>Document</title>
  <!– 导包 –>
  <script src=”./vue.js”></script>
  </head>
  
  <body>
  
  <!– HTML结构 –>
  <div id=”app”>
  登陆框： <input type=”text” v-model=”username” placeholder=”请输入用户名”>
  <br>
  密码框： <input type=”password” v-model=”password” placeholder=”请输入密码”>
  <br>
  <button @click=”loginClick”>登录</button>
  </div>
  <!–
  1.学习目标：了解双向数据绑定的意义
  可以让我们快速 (得到 | 设置) 表单元素的值
  –>
  <script>
  /* 创建vue实例 */
  let app = new Vue({
  //el:挂载点
  el: ‘#app’,
  //data: 要渲染的数据
  data: {
  username：”,
  password: ”
  },
  methods: {
  loginClick:function(){
  //修改了表单元素 -> 修改了password
  if(this.password != ‘123456’){
  alert(‘密码错误，请重新输入’);
  //修改password -> 修改了表单元素的值
  this.password = ”;
  }
  }
  },
  })
  </script>
  </body>
  </html>

原文链接：https://blog.csdn.net/m0_68359121/article/details/125828888

1.2-Vue两个重要特点

数据驱动

2-组件化开发(盒子复用)

1.3-Vue基本使用

1.4-Vue的挂载点介绍

1.5-Vue的插值表达式介绍

Vue指令介绍

v-text指令

v-html指令

v-on指令（绑定事件）

vue事件修饰符

vue方法中的this

v-bind指令 (绑定标准属性的值)

v-bind指令基本使用

vue样式绑定

vue指令案例：购物车加减

v-for指令(列表渲染)

v-model指令(双向数据绑定)

双向数据绑定基本使用

双向数据绑定的意义

你可能也喜欢