目录
初识vue
vue模板语法2类
数据绑定
data与el的两种写法
MVVM模型
事件对象
键盘事件
事件的基本使用
姓名案例
天气案例
监视属性
深度监视
watch对比computer
绑定class样式
绑定style样式
条件渲染
列表渲染
key的作用与原理
列表过滤
列表排序
初识vue
1.想让vue工作，必须创建一个vue实例，且要传入一个配置对象；
2.root容器里的代码依然符号html规范，只不过混入一个特殊的vue语法
3.root容器里的代码被称为【vue模板】
4.真实开发中只有一个vue实例，并且会配合组件一起使用；
5.vue实例和容器是一一对应的
6.{{xxx}}中的xxx要写js的表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到的数据地方会自动更新
注意区分js表达式和js代码（语句）
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
（1）a
（2）a+b
（3）demo（1）
（4）x===y？‘a’：‘b’
2.js代码/js语句
（1）if（）{}
（2）for（）{}
<!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">
<title>初始vue</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>Hello,{{name}}，{{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
//创建vue实例
new Vue({
el: '#root',//el用于指定当前vue实例为哪个容器服务，植通常为css选择器字符串。
data: {//data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
name: '尚硅谷123',
address: '深圳'
}
})
</script>
</body>
</html>vue模板语法2类
1.插值语法：
功能：用于解析标签体的内容
写法{{xxx}}，xxx是js的表达式，且可以直接读取到data中的所有属性
2.指令语法
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件。。。）
举例：v-bind：herf=“xxx”或 简写为 ：herf=“xxx”，xxx同样为js的表达式且可以直接读取到data中的所有属性。
备注：vue有很多指令，且都有v-…的形式
<!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">
<title>vue模板</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr />
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习2</a>
<a :href="school.url" x="hello">点我去{{school.name}}学习1</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
name: 'jack',
school: {
name: '尚硅谷',
url: 'http://www.atguigu.com',
}
}
})
</script>
</body>
</html>
数据绑定
1，单项数据绑定 v-bind
数据只能从data里面流向页面
2，双向数据绑定 v-model
数据不仅能从data流向页面，还可以从页面流向data
备注：：
1，双向绑定一般都引用在表单类元素上（如：input，select等）
2，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">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
单项数据绑定：<input type="text" :value="name"><br />
双项数据绑定：<input type="text" v-model:value="name"><br />
</div>
<script type="text/javascript">
Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
new Vue({
el: '#root',
data: {
name: '尚硅谷'
}
})
</script>
</body>
</html>
?data与el的两种写法
1，el的两种写法
（1）new Vue时候配置el属性。
（2）先创建Vue实例，随后再通过vm.$mount（‘#root’）指定el的值。
2，data有两种写法
（1）对象式
（2）函数式
如何选择：组件时必须使用函数式
3.重要原则
由vue管理的函数，一定不能写箭头函数，一旦写了箭头函数，this就不是vue实例了
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
//el的两种写法
const v = new Vue({
el:'#root',//第一种
data:{
name:'shangguigu'
}
})
console.log(v)
v.$mount('#root')//第二种
</script>
</body>
MVVM模型
1，M：模型model，data中的数据
2，V：视图view，模板代码
3，VM：视图模型viewmodel，vue实例
观察发现
1，data上的说有属性，最后都出现在vm上
2，vm身上的所有属性，以及vue原型上的
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
<h1>测试一下：{{_c}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
name: '尚硅谷',
address: 'beijing',
a: 1
}
})
console.log(vm);
</script>说有属性，在vue模板中都可以直接使用
数据代理
1，vue中的数据代理
通过vm对象来代理data对象中属性的操作（读/写）
2，基本原理
通过object。defineProperty()把对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性
?
1，
? ? <script type="text/javascript">
? ? ? ? Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
? ? ? ? let number = 18
? ? ? ? let person = {
? ? ? ? ? ? name: '张三',
? ? ? ? ? ? sex: '男',
? ? ? ? }
? ? ? ? Object.defineProperty(person, 'age', {
? ? ? ? ? ? value: 18,
? ? ? ? ? ? enumerable: true,
? ? ? ? ? ? writable: true,
? ? ? ? ? ? configurable: true,
? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? console.log('有人读取了age属性了')
? ? ? ? ? ? ? ? return number
? ? ? ? ? ? },
? ? ? ? ? ? set() {
? ? ? ? ? ? ? ? console.log('有人修改了age属性，且值式', value);
? ? ? ? ? ? ? ? number = value
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
2，
?<!-- 数据代理：通过一个对象代理对另一个对象中的属性的操作 -->
? ? <script type="text/javascript">
? ? ? ? Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
? ? ? ? let obj = { x: 100 }
? ? ? ? let obj2 = { y: 200 }
? ? ? ? Object.defineProperty(obj2, 'x', {
? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? return obj.x
? ? ? ? ? ? },
? ? ? ? ? ? set(value) {
? ? ? ? ? ? ? ? obj.x = value
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
3，
<body>
? ? <div id="root">
? ? ? ? <h2>学校名称:{{name}}</h2>
? ? ? ? <h2>学校地址:{{address}}</h2>
? ? </div>
? ? <script type="text/javascript">
? ? ? ? Vue.config.productionTip = false
? ? ? ? const vm = new Vue({
? ? ? ? ? ? el: '#root',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? name: 'atguigu',
? ? ? ? ? ? ? ? address: 'jkdjhg'
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>?
?事件对象
?
<body>
<div id="root">
<h2>欢迎来到{{name}}</h2>
<button v-on:click="showInfo1">点击提示信息</button>
<button v-on:click="showInfo2($event,66)">点击提示信息22</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
name: 'atguigu',
},
methods: {
showInfo1(event) {
alert('同学你好')
},
showInfo2(event, number) {
alert('你好同学')
console.log(event, number);
}
}
})
</script>
事件修饰符
1，prevent阻止默认事件
2,stop阻止事件冒泡
3,once事件只触发一次
4,capture使用事件的捕获模式
5,self只有event.target是当前操作的元素是才触发事件
6,passive事件的默认行为立即执行，无需等待事件回调执行完毕
?键盘事件
?事件的基本使用
1，使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
2，事件的回调需要配置再methods对象中，最终会再vm上
3，methods中配置的函数，不要用箭头函数！否则this就不是vm了
4，methods中配置的函数，都是vue所管理的函数，this的指向是vm或组件实例对象
5，@click=“demo“和@click=”demo（$event）“效果一样，但是后者可以传参
练习案例（1）：姓名案例
?练习案例（2）：天气案例
监视属性watch
1，当被监视的属性变化时，回调函数自动调用
2，监视属性必须存在才能进行监视
3，监视的两种方法
（1）new Vue时传入watch配置
（2）通过vm.$watch监视
?深度监视
?
?watch监视属性对比computer计算属性
1，用watch写了姓名属性
?computer写姓名属性
?绑定class样式
1，写法：class=''xxx''xxx可以是字符串，对象，数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字要确定
1
?2
?
?3
?绑定style样式
:style=''{fontSize:xxx}''其中xxx是动态值
:style=''[a,b]''其中a，b是样式对象
?条件渲染
1，v-if写法
（1）v-if=“表达式”
（2）v-else-if=“表达式”
（3）v-else=“表达式”
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if=，v-else=一起被使用，但结构不能被打断
2，v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式可以获取到
?列表渲染
v-for指令
1，用于展示列表数据
2，语法：v-for=“(item,index)"in xxx":key="yyy"
3,可遍历：数组，对象，字符串（用的很少），指定次数（用的很少）
?
?key的作用与原理
?
?列表过滤
1，用watch实现
用用computer实现
?列表排序
?