Vue是什么
- Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue的特点
- 遵循MVVM模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 也可以引入其它第三方库开发项目
起步
-
创建一个html文件，引入vue.js
-
想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
-
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
-
root容器里的代码被称为【Vue模板】
-
Vue实例和容器是一一对应的
-
真实开发中只有一个Vue实例，并且会配合着组件一起使用
-
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
-
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
注意区分：js表达式 和 js代码(语句)
-
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
1. a 2. a+b 3. demo(1) 4. x === y ? 'a' : 'b' -
js代码(语句)
1. if(){} 2. for(){}
<!-- 准备好一个容器 --> <div id="app"> <h1>hello,{{text}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false //创建Vue实例 new Vue({ el:'#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。 data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。 text:'vue' } }) -
模板语法
Vue模板语法有2大类：
-
插值语法：
- 功能：用于解析标签体内容
- 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
-
指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
- 举例：v-bind:href="xxx"或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性
- 备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子
<div id="app"> <h1>插值语法</h1> <h2>hello,{{name}}</h2> <hr > <h1>指令语法</h1> <input type="text" name="i1" id="i1" :value="school.name" /> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#app', data:{ name:'lai', school:{ name:'ycu', address:'yc' } } }) </script>
数据绑定
Vue中有2种数据绑定的方式
-
单向绑定（v-bind）：数据只能从data流向页面
-
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
- 双向绑定一般都应用在表单类元素上（如：input、select等）
- v-model:value，可以简写为v-model，因为v-model默认收集的就是value值
<div id="app"> 单向数据绑定<input type="text" name="i1" id="i1" :value="t1" /><br> 双向数据绑定<input type="text" name="i2" id="i2" v-model="t2" /> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#app', data:{ t1:'aaa', t2:'bbb' } }) </script>
el和data的两种写法
- el有2种写法
- new Vue时候配置el属性
- 先创建Vue实例，随后再通过vm.$mount(‘#app’)指定el的值
- data有2种写法
- 对象式
- 函数式
- 一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
- 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
Vue.config.productionTip = false
//el的两种写法
/* const v = new Vue({
// el:'#app',//第一种写法
data:{
name:'lai'
}
})
v.$mount('#app')//第二种写法 */
//data的两种写法
new Vue({
el:'#app',
//第一种写法对象式
/* data:{
name:'lai'
} */
//第二种写法函数式
data(){
return {
name:'lai'
}
}
})
MVVM模型
-
M：模型(Model) ：对应 data 中的数据
-
V：视图(View) ：模板
-
VM：视图模型(ViewModel) ： Vue 实例对象
- 观察发现：
- data中所有的属性，最后都出现在了vm身上
- vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
数据代理
理解Object.defineProperty方法
-
作用：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
-
语法：Object.defineproperty( object，‘ propName ’ ，descriptor)
-
参数详解：
- object ：要定义属性的对象，返回的也是
- propName ：要定义或修改的属性的名称
- descriptor：要定义或修改的属性描述符(一个描述符对象)
let number = 22 let person = { name:'lai', sex:'men' } Object.defineProperty(person,'age',{ /* value:number, enumerable:true, //控制属性是否可以枚举，默认值是false writable:true, //控制属性是否可以修改，默认值是false configurable:true, //控制属性是否可以被删除，默认值是false */ // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ return number }, // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age') number = value } }) console.log(Object.keys(person)) /* for (let key in person) { console.log(person[key]) } */ console.log(person)
何为数据代理
数据代理：通过一个对象对另一个对象中的属性的操作（读/写）
let obj = {
x:123
}
let obj2 = {
y:321
}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
Vue中的数据代理
-
概念：通过vm对象来代理data对象中属性的操作（读/写）
-
好处：更方便的操作data中的数据
-
基本原理：
- 通过Object.defineProperty()把data对象中所有属性添加到vm上
- 为每一个添加到vm上的属性，都指定一个getter/setter
- 在getter/setter内部去操作（读/写）data中对应的属性
事件处理
事件的基本使用：
- 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，不要用箭头函数，否则this的指向就不是vm了
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
- @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参
<div id="app">
<button @click="changeColor" style="background-color: aqua">点我变色</button>
<button @click="showMsg($event,666)">点我</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#app',
methods:{
changeColor(){
event.target.style.backgroundColor = 'red'
},
showMsg(event,value){
console.log(value)
}
}
})
</script>
事件修饰符
-
Vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时才触发事件
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<div id="app"> <!--阻止默认事件（常用）--> <a href="https://www.baidu.com" @click.prevent="prevent">百度</a> <!--阻止事件冒泡（常用）--> <div @click="demo" style="height: 40px;background-color: aqua"> <button @click.stop="demo1">点我不会冒泡</button> </div> <!--事件只触发一次（常用）--> <button @click.once="demo2">只能点一次</button> <!--只有event.target是当前操作的元素时才触发事件--> <div @click.self="demo" style="height: 40px;background-color: aqua"> <button @click="demo1">点我不会heihei</button> </div> <!--使用事件的捕获模式--> <div style="height: 60px;background-color: palegreen" @click.capture="showMsg(1)"> div1 <div style="height: 30px;background-color: pink" @click="showMsg(2)"> div2 </div> </div> <!--事件的默认行为立即执行，无需等待事件回调执行完毕--> <ul style="height: 200px;background-color: purple;overflow: auto" @wheel.passive="demo3"> <li STYLE="height: 100px"></li> <li STYLE="height: 100px"></li> <li STYLE="height: 100px"></li> <li STYLE="height: 100px"></li> </ul> </div>Vue.config.productionTip = false new Vue({ el:'#app', methods:{ prevent(){ alert('hh') }, showMsg(value){ console.log(value) }, demo(){ alert('heihei') }, demo1(){ alert(1) }, demo2(){ alert(2) }, demo3(){ for (let i = 0; i < 10000; i++) { console.log('hh') } console.log('lai') } } })
键盘事件
- Vue中常用的按键别名：
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行 => tab (特殊，必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
- 系统修饰键（用法特殊）：ctrl、alt、shift、meta
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用：正常触发事件
- 也可以使用keyCode去指定具体的按键（不推荐）
- Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
<div id="app">
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showMsg">
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
methods:{
showMsg(e){
console.log(e.target.value)
}
}
})
</script>
1430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
