Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法，入门语句，Vue学习笔记
学习网站：https://www.bilibili.com/video/BV15741177Eh
vue 的体验
-
响应式：数据一旦改变，视图就会响应改变
-
el:指定了这个Vue 对象挂载到哪一个元素
-
data:该属性中通常存储一些数据
<div id="app">{ { massage}}</div> <!-- 显示helleWorld --> <script src="./vue.js"></script> // 导入Vue.js 文件 <script> var vm = new Vue({ // 创建一个Vue 实例对象 el:"#app", // 挂载到 id为app的元素上（div） data:{ // data 是一个Vue对象存储数据的属性 massage:"helleWorld" } }) </script>
Vue中的MVVM
- M：model ==> 数据
- V：viem ==> 视图
- VM：viewModel ==> DOM 监听，数据绑定
- 数据（model）一旦改变,VM监听到，就会改变视图（V）
生命周期
-
生命周期:事物从创建到销毁的过程
-
声明周期函数，Vue 自动创建的函数，有生命周期
-
常见的生命周期函数
-
new Vue() ==> 开始创建一个Vue 实例对象
-
init() ==> 开始初始化Vue实例对象，这个时候，只有默认的生命周期函数和默认的事件
-
beforeCreate(){} ==> 在boforeCreate执行时，data和methods中的数据还没有初始化
-
create(){} ==> 在create执行时，可以调用data中的数据和methods中的方法
-
beforeMount(){} ==> 在beforeMount执行时，模板已经在内存编译好了，但未挂载到页面中去，
此时页面还是旧的，内存中已经存在DOM，所以这个时候，不能进行DOM 操作
-
mounted(){} ==> mount执行时,将内存中编译好的模板，替换到浏览器的页面中，这个时候，可以进行DOM操作
-
beforeUpdate(){} ==> 在beforeUpdate执行时，页面中现实的数据是旧的，但是data中的数据就新的，页面尚未和最近数据同步
-
update(){} ==> updata执行时，根据data中的最新数据，在内存中重新渲染一个最新内存DOM，再将最新的DOM替换旧页面
-
deforeDestroy(){}==> deforeDestroy执行时,Vue实例，从运行阶段，进入销毁阶段，data,methods,fillter,等，都处于可以用状态
-
destroyed(){} ==> destroyed执行时，组件已经完全销毁，此时，数据，方法，指令，过滤器都已经不用了
-
-
demo
var vm = new Vue({ el:'#app', data: { }, methods: { }, beforeCreate(){ }, create(){ }, beforeMount(){ }, mounted(){ }, beforeUpdate() { }, updated() { }, beforeDestroy(){ }, destroyed(){ } }
基本语法
-
{ {}} 不会替换原来的内容
-
v-once：不是响应式，数据改变，但是视图不会改变】
-
v-text ：会替换点原来的内容,以文本输出
-
v-html : 会替换点原来的内容以html的语法输出
-
v-pre 原样输出
-
v-cloak:解决闪烁问题，在style 里添加样式display:none，并把v-cloak 加在div中
在vue 解析之前, div 中有一个属性 v-cloak
在vue 解析之后，div 中没有一个属性 v-cloak
-
案例
<style> [v-cloak]{ display: none; } </style> <body> <div id="app" v-cloak> <!-- 解决闪烁问题:当Vue没有加载完成时，会出现{ { message}} --> <h2>{ { message}} 你好</h2><!--helleWorld 你好 --> <h2 v-once>{ { message}}</h2> <!--message改变，但是还是显示原来的内容 --> <h2 v-text="url">你好</h2><!-- 会替换点原来的内容,以文本输出--> <h2 v-html="url">你好</h2><!-- 会替换点原来的内容,以html的语法输出--> <h2 v-pre>{ { message}}你好</h2><!-- 不会替换原来的内容,将表达式文本输出 --> </div> <script src="./vue.js"></script> <script> let vue = new Vue({ el:"#app", data:{ message:"helleWorld", url:"百度一下", } }) </script>
绑定属性
-
v-bind:src=“url”
-
v-bind:href=“Href”
-
:bind:title = “Text” 冒号简写
<img v-bind:src="imgUrl" width="300"> //src为：./img/1.jpg <a :href="aHref">百度一下</a> //href为：http://www.baidu.com <h2 :title="titleText">小猫咪</h2> //title:animal data: { imgUrl: "./img/1.jpg", aHref:"http://www.baidu.com", titleText:"animal" } -
:class,用对像的键值对的形式，也可以用一个方法返回一个对象
<div id="app"> <!-- 绑定class属性，用大括号，键值对的形式 --> <h2 v-bind:class="{active:isActive,big:isBig}">helle</h2> <h2 v-bind:class="getStyle()">helle</h2> <!-- 注册事件，控制class 属性的值 --> <button v-on:click="changeColor">color</button> <button v-on:click="changeSize">size</button> </div> data: { isActive: true, isBig: false }, methods: { getStyle:function(){ return { active:this.isActive,big:this.isBig} }, changeColor: function () { this.isActive = !this.isActive; }, changeSize: function () { this.isBig = !this.isBig } } -
：class,用数组的形式，绑定一个class 属性，也可以用一个方法返回一个数组
<div id='app'> <!--有引号，字符串 class="active line" --> <h2 :class="['active','line']">有引号</h2> <!--沒有引号，变量 class="color font-size" --> <h2 :class="[active,size]">没有引号</h2> <h2 :class="getStyle()">方法返回数组的形式</h2> </div> data: { active:'color', size:'font-size' }, methods: { getStyle:function(){ return [this.active,this.size] } }
计算属性
-
computed属性，和data等一样，是一个Vue的一个属性
-
有缓存，数据改变才触发，并返回结果，多次使用computed的属性，代码只执行一次，因为有缓存，当时method 会执行多次代码。
-
有getter 方法和 setter 方法,setter方法，接受fullName 的新值
-
fullName 重新赋值时触发 set 方法，方法接受的参数是newValue; firsName 或 lastName 改变，则触发 get 方法,get方法接受的参数是vue实例。两个方法的参数都不是必须的
computed:{ fullName:{ // fullName 重新赋值时触发 set 方法 set:function(newValue){ console.log("set方法触发了,参数是:",newValue) }, get:function(newValue){ // firsName 或 lastName 改变，则触发 get 方法 console.log("get方法触发了,参数是:",newValue==this) return this.firstName + this.lastName } } } -
我们平时都不需要set方法，所以可以这样写计算属性，默认是get方法：
computed:{ fullName:function(){ return this.firstName + this.lastName } }
事件监听
-
利用 v-on 绑定点击事件,首先要在methods里声明函数才可以调用
<div id='app'> { { counter}} <button v-on:click="add">+</button> <!-- 绑定点击事件 --> <button v-on:click="sub">-</button> <!-- 绑定点击事件 --> </div> <script> var vm = new Vue({ el:'#app', data: { counter:0 }, methods: { add(){ //定义一个 加法函数 this.counter++ }, //定义一个 减法函数 sub:function(){ this.counter-- } } -
缩写 @click = v-on:click
<button @click="add">+</button> <button @click="sub">-</button> -
绑定键盘事件，绑定在button 上的键盘事件，要点一个按钮，在点击键盘才可以触发
// 键盘任意键弹起事件 <button @keyup="add">键盘弹起事件</button> // enter回车键弹起事件 <button @keyup.enter="add">键盘弹起事件</button> // 键盘任意键下落事件 <button @keydown="add">键盘弹起事件</button> // enter回车键下落事件 <button @keydown.enter="add">键盘弹起事件</button>
v-on 修饰符
-
常用的v-on 修饰符
- stop阻止事件冒泡
- prevent 阻止默认事件
- once 只触发一次回调函数
- keyup 监听某个键盘事件
<!-- stop 修饰符的使用 --> <div @click="divClick">DIV <button @click.stop="btnClick">按钮</button><!--阻止事件冒泡 --> </div> <!-- prevent 修饰符的使用，阻止默认事件 --> <form action="http://www.baidu.com"> <input type="submit" value="提交跳转" @click="submitClick"> <input type="submit" value="提交不跳转" @click.prevent="submitClick"> </form> <!-- keyup 监听某个按键 回车键弹起触发 --> <input type="text" @keyup.enter="keyUp"><br> <!-- once，只是触发一次回调--> <button @click.once="onceClick">按钮</button> methods: { divClick(){ console.log("div"); }, btnClick(){ console.log("button") }, submitClick(){ console.log("submitClick") }, keyUp(){ console.log("keyUp"); }, onceClick(){ console.log("onceClick") } }
v-on 参数,event 对象和括号问题
-
带括号，带参数，接受event 对像
<div id='app'> <!-- 1、事件调用的方法没有参数,有返回值， --> <button @click="btn1Click" :title="btn1Click">按钮1</button> <!-- title:function MouseEvent --> <button @click="btn1Click()" :title="btn1Click()">按钮1</button><!-- MouseEvent --> <button @click="btn1Click($event)">按钮1</button><!--接受event 事件--> <!-- 2、事件调用的方法有一个参数，但是省略小括号，vue 会 默认将浏览器生产的event 事件对象作为参数传入 --> <button @click="btn2Click">按钮2</button><!-- My name is: MouseEvent --> <button @click="btn2Click()">按钮2</button><!-- My name is: undefined --> <button @click="btn2Click('小毅')">按钮2</button><!--My name is:小毅 --> <!-- 3、事件调用的方法需要event对象，同时又需要其他参数,可以在加一个 $ --> <button @click="btn3Click('cat',$event)">按钮3</button> <!-- 动物: cat MouseEvent --> </div> <script> var vm = new Vue({ el:'#app', data: { }, methods: { btn1Click(){ console.log(event) return "title" }, btn2Click(name){ console.log("My name is:",name,) }, btn3Click(animal,event){ console.log("动物:",animal,event) } } }) </script>
小案例
-
利用v-for循环列表，注册点击事件，点击列表项的时候有高亮效果
-
方法一：
<div id='app'> <ul ref="ul"> <li v-for="(item,index) in mens" v-on:click="active(index)">{ { index+1}} { { item}}</li> </ul> </div> <script src='./vue.js'></script> <script> var vm = new Vue({ el:'#app', data: { mens:["小毅","小杰","小淼","小狗","小喵"] }, methods: { active:function(index){ // console.log(this.$refs['ul'].children) lis = this.$refs.ul.children for(let i = 0;i < lis.length;i++){ if(i == index){ lis[i].style.backgroundColor="red" }else{ lis[i].style.backgroundColor="" } } } } }) </script> -
方法二：
<style> .active{ background-color: red; } </style> <div id='app'> <ul ref="ul"> <li v-for="(item,index) in mens" :class="{active: index === currentIndex}" @click="currentIndex = index">{ { index+1}} { { item}}</li> </ul> </div> <script src='./vue.js'></script> <script> var vm = new Vue({ el:'#app', data: { mens:["小毅","小杰","小淼","小狗","小喵"], currentIndex:"" } }) </script>
条件判断
-
v-if 操作DOM树，如果不知道是不是要显示，或者显示一次时，通常用v-if
<div id='app'> <button @click="isShow=!isShow">登录</button> <div v-if="isShow"> // isShow 为true 时渲染 用户:<input type="text"><br> 密码:<input type="password"> </div> </div> -
v-esle-is 的使用
<div id='app'> <h4 v-if="score>=90">优秀</h4> <h4 v-else-if="score>=80">良好</h4> <h4 v-else-if="score>=60">及格</h4> <h4 v-else>不及格</h4> <button @click="sub">score-10</button> </div> <script> var vm = new Vue({ el:'#app', data: { score:99 }, methods: { sub(){ this.score = this.score -10; } } }) </script> -
v-show 操作display,如果需要频繁切换显示和隐藏，那么用v-show
<h2 v-show="true">{ { message}}</h2> // isShow 为true 时显示 -
切换的小案例
<div id='app'> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱"> </span> <br> <button @click="isUser = !isUser">登录方式</button> </div> -
input框复用问题
-
在切换登录方式的时候，如果输入了内容，切换之后，发现文字依然显示之前的输入的内容
-
这是因为Vue 在进行DOM渲染时，处于性能的考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
-
如果我们不希望Vue 出现类似重复利用的问题，可以给对应的input添加key,并保证key 的不同
<div id='app'> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱"> </span> <br> <button @click="isUser = !isUser">登录方式</button> </div>
-
循环遍历
-
遍历数组
<ul> <li v-for="(item,index) in list">{ { index}} --- { { item}}</li> </ul> -
遍历对象
<ul> <li v-for="(item,key,index) in people"> { { index}} -- { { key}} -- { { item}} </li> </ul> -
key ，在循环的时候，可以给绑定一个 kye,当时key的值，一定要保持唯一性，利于diff算法，提高性能。还可以使key和item 一 一 对应，建议不要用index 作为key的值。
<ul> <li v-for="item in list" :key="item">{ { item}}</li> </ul>
splice 方法
-
插入元素
var list = ["小毅","小杰","小猫咪","小狗","小红"] //在第 1 个 元素后,插入一个元素,["小毅", "菲尔普斯", "小杰", "小猫咪", "小狗", "小红"] list.splice(1,0,"菲尔普斯") -
替换元素
var list = ["小毅","小杰","小猫咪","小狗","小红"] // 第 1 元素开始,替换2个元素,输入1个名字 ["小毅", "菲尔普斯", "小狗", "小红"] list.splice(1,2,'菲尔普斯') // 第 1 元素开始,替换2个元素,输入2个名字 ["小毅", "菲尔普斯", "刘翔", "小狗", "小红"] list.splice(1,2,'菲尔普斯','刘翔') // 第 1 元素开始,替换2个元素,输入3个名字,["小毅", "菲尔普斯", "刘翔", "姚明", "小狗", "小红"]，替换 2 个元素，插入 1 个元素 list.splice(1,2,'菲尔普斯','刘翔',"姚明") -
删除元素
var list = ["小毅","小杰","小猫咪","小狗","小红"] list.splice(1,3) // 第 1 个元素开始，删除3个元素 ["小毅","小红"] list.splice(1) // 第 1 个元素开始，删除后面所有元素["小毅"]
数组的响应式方法
-
数组的响应式方法
-
splice() 插入/删除/替换
-
push() 在数组后面添加
-
unshift() 在数组前面添加
-
pop() 删除数组最后一个元素
-
shift() 删除数组第一元素
-
sort() 对数组进行排序
-
reverse() 反转数组
<script> var list = [1, 22, 3, 4] list.splice(1, 2) // 从第1个元素开始，删除2个元素[1,4] list.splice(1, 0, 88) //从第1元素开始,插入一个元素[1, 88, 22, 3, 4] list.splice(1, 3, 66) //从第1个元素开始,将后面的3个元素,替换为66 [1, 66] list.push(66) //在数组后面插入一个元素 [1, 22, 3, 4, 66] list.unshift(88) //在数组前面插入一个元素[88,1, 22, 3, 4] list.pop() //删除数组最后一个元素[1, 22, 3] list.shift() //删除数组第一个元素[22, 3, 4] list.sort() // 对数组进行排序 list.reverse() //反转数组[4, 3, 22, 1] </script>
-
-
通过数组的 index 改变数组，是不会发生响应式（list.(index)=“aa”），可以用splice来替换
var list = ["a","b","c"] list[0] = "aa" //数据改变，但是视图没有改变["aa", "b", "c"] //响应式 list.splice(0,1,'aaa')//数据改变，视图也改变 ["aaa", "b", "c"] console.log(list)
v-model 双向数据绑定
双向绑定
-
v-model只能用在input表单中，双向绑定的意思是：绑定的值message 改变，那么input 中的value值也改变，反之，input 中的value值改变，那么绑定message 也改变
<div id='app'> <input type="text" v-model="message"> { { message}} </div> <script> var vm = new Vue({ el:'#app', data: { message:"helloWorld" } }) </script> -
Vue-model 双向绑定的原理分析：v-model其实是v-bind 和 v-on 的结合
- v-bind绑定一个value 属性
- v-on 指令给当前的元素绑定input 事件
<div id='app'> <!-- <input type="text" :value="message" @input="valueChange"> --> <input type="text" :value="message" @input="message = $event.target.value"> { { message}} </div> <script> var vm = new Vue({ el:'#app', data: { message:"hello World" }, methods: { valueChange(event){ this.message = event.target.value } } }) </script>
v-model 结合ridio 实习单选框
-
普通html 形式实现单选框，name 属性要一样才可以实现单选
<label for="male"> 男<input type="radio" id="male" name="sex"> </label> <label for="female"> 女<input type="radio" id="male" name="sex"> </label> -
用v-model 实现当选框时，要绑定一个变量(sex),
-
选择性别单选框
<div id='app'> <label for="male"> 男<input type="radio" id="male" value="男" v-model="sex"> </label> <label for="female"> 女<input type="radio" id="male" value="女" v-model="sex"> </label> <br> { { sex}} </div> data: { sex: "" }
-
v-model 实现checkBox 多选框
-
实现同意协议，v-model 绑定一个变量
<label for="license"> <input type="checkbox" id="license" v-model="agree">同意协议 </label> <br> 你选择的是:{ { agree}} <button :disabled="!agree">下一个</button> data: { agree: false } -
实现多选框
-
如果v-model 绑定的数据是一个数组，那么点击，就会向数组添加一个元素
-
如果v-model 绑定的数据是一个对象，那么点击，要么全选（true），要么全不选(false)
<label for=""> <input type="checkbox" value="小毅" v-model="people">小毅 <input type="checkbox" value="" v-model="people">家强 <input type="checkbox" value="英杰" v-model="people">英杰 <input type="checkbox" value="家斌" v-model="people">家斌 </label> <br> 绑定的数据是数组:{ { people}} <br> <label for=""> <input type="checkbox" value="小毅" v-model="people1">小毅 <input type="checkbox" value="家强" v-model="people1">家强 <input type="checkbox" value="英杰" v-model="people1">英杰 <input type="checkbox" value="家斌" v-model="people1">家斌 </label> <br> 绑定的数据是布尔类型:{ { people1}} data: { people: [], people1:true, }
-
v-model 结合select 使用
-
单选:只能选中一个值
-
v-model 绑定一个变量
-
当我们选择option 中的一个，会将这个选项的value 赋值到这个变量中
<select v-model="Myselect"> <option value="English">英语</option> <option value="Math">数学</option> <option value="art">美术</option> </select> 你的选择是:{ { Myselect}} data: { Myselect:"English" }
-
-
多选：可以选择多个值
-
v-model 绑定的是一个数组
-
在select 中添加一个属性：mutiple
<select v-model="Myselects" multiple> <option value="English">英语</option> <option value="Math">数学</option> <option value="art">美术</option> </select> 你的选择是:{ { Myselects}} data: { Myselects:[] }
-
input 中的值绑定
-
得到一组数据，然后通过 v-for 和 v-bind，v-model 得来实现
<div id='app'> <label v-for="item in citys":for="item"> <input type="checkbox" :value="item" :id="item" v-model="myselect"> { { item}} </label> <br> 选择的城市是：{ { myselect}} </div> <script src='./vue.js'></script> <script> var vm = new Vue({ el:'#app', data: { citys:["北京","上海","深圳","香港","澳门","西藏"], myselect:[] } }) </script>
v-model 修饰符
-
js
-
lazy 在input框中，回车之后，才将input中的value更新data中
-
number 在input框中输入的数字，默认是变成字符串类型，可以加一个number 修饰符，那么输入的数字就不会变成字符串
-
trim，去掉收尾两端的空格
<div id='app'> <!-- lazy --> <input type="text" v-model.lazy="message"> <h2>{ { message}}</h2> <!-- number --> <input type="number" v-model.number="age"> <h2>{ { age}}----{ { typeof age}}</h2> <!-- trim --> <input type="text" v-model="say"> <h2>{ { say}}</h2> </div> <script src='./vue.js'></script> <script> var vm = new Vue({ el:'#app', data: { message:"写点东西吧", age:12, say:"请不要输入空格" } }) </script>
-