1.初识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.js表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
<!-- 准备好一个容器 --> <div id="demo"> <h1>Hello,{ {name.toUpperCase()}},{ {address}}</h1> </div> <script type="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //创建Vue实例 new Vue({ el:'#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。 data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。 name:'atguigu', address:'北京' } })
2.模板语法
Vue模板语法有2大类:
1.插值语法:
功能:用于解析标签体内容。
写法:{ {xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式,
且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子。
3.v-model的用法:(v-model可以实时的更改页面和vue中的数据,但是只限于标签的属性有value的)
v-model :value=‘’相当于, v-model=‘’(双向绑定)
<!-- 准备好一个容器--> <div id="root"> <h1>插值语法</h1> <h3>你好,{ {name}}</h3> <hr/> <h1>指令语法</h1> <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{ {school.name}}学习1</a> <a :href="school.url" x="hello">点我去{ {school.name}}学习2</a> <!--上面的这两个a标签是等价的--> <a href="http://www.baidu.com">点我冯志炫,我就。。。😏</a> <!--这里href属性必须把他的协议名称加上,否词跳转不过去--> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', //一定不要忘了指定对应的模板 data:{ name:'jack', school:{//school一定要写在data中,这样才能生效 name:'尚硅谷', url:'http://www.atguigu.com', } } })
3.el和data的两种写法
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
<div id="root"> <h1>你好,{ {name}}</h1> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //-------el的两种写法 //第一种写法*/ new Vue({ el:'#root', data:{ name:'尚硅谷' } }) //第二种写法 */ const v = new Vue({ el:'#root', data:{ name:'尚硅谷' } }) v.$mount('#root') //data的两种写法 //data的第一种写法:对象式 new Vue({ el:'#root', data:{ name:'尚硅谷' } } //data的第二种写法:函数式 new Vue({ el:'#root', data(){ //或者是 data : function(){} console.log('@@@',this) //此处的this是Vue实例对象 return{//注意这里的return写法 name:'尚硅谷' } } })
4.MVVM模型
1. M:模型(Model) :data中的数据
2. V:视图(View) :模板代码
3. VM:视图模型(ViewModel):Vue实例
观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
5.回顾Object.defineproperty方法
Object.defineProperty(person,'age'--------就是将age这个属性给person对象(通过defineproperty方法)
注意这里的Object中的‘O’是大写的
// enumerable:true, //控制属性是否可以枚举,默认值是false
// writable:true, //控制属性是否可以被修改,默认值是false
// configurable:true //控制属性是否可以被删除,默认值是false
//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
<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>
6.数据代理:
<!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)-->
这里obj2和obj1共享x,就是obj2代理obj1的x
<!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)--> <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>
7.vue中的数据代理
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
vm就是通过Object.defineProperty()将图一中的‘data’完整的放入‘_data’中,
然后再vm中为每一个vm上的属性,都指定一个getter/setter,这样和vm中还设置了的name,address就能实时更换(就可以直接用name 了,而不是通过'_data'间接调用)
<script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <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:'尚硅谷', address:'宏福科技园' } }) </script>
8.时间的基本使用
1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;///且其中的 ':' 是 'v-bind:'
2.事件的回调(函数)需要配置在对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传更多参数;
<div id="root"> <h2>欢迎来到{ {name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --> <button @click="showInfo1">点我提示信息1(不传参)</button> <button @click="showInfo2($event,66)">点我提示信息2(传参)</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', }, methods:{ showInfo1(event){///这里的event是默认事件(不填写这个参数也有,就是鼠标事件) // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好!') }, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) //此处的this是vm alert('同学你好!!') } } }) </script>
9.事件修饰符
Vue中的事件修饰符:
@click.stop,@click.once etc..
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
7.上面的这些也可以连着用,像: @keydown.stop.passive= ''
<div id="root"> <h2>欢迎来到{ {name}}学习</h2> <!-- 阻止默认事件(常用) --> <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a> <!-- 阻止事件冒泡(常用) --> <div class="demo1" @click="showInfo"> //此时如果这个div还有一个父盒子,那么还需要在父盒子中加一个,stop(因为这是一开始就定义好的,除非你在这个方法里面改) <button @click.stop="showInfo">点我提示信息</button> <!-- 修饰符可以连续写 --> <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> --> </div> <!-- 事件只触发一次(常用) --> <button @click.once="showInfo">点我提示信息</button> <!-- 使用事件的捕获模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件; --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕; --> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods:{ showInfo(e){ alert('同学你好!') // console.log(e.target) }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累坏了') } } })
10.键盘事件
1.Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
<input type="text" @keydown.caps-lock="test">
//大小写转换的键
3.系统修饰键(用法特殊):ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
//这里如果想要单独ctrl+‘某个键’可以:@keyup.ctrl.y=''-------这就代表只有ctrl+y才能触发这个事件;
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
<input type="text" @keydown.13="showInfo">
//13就是回车的keycode值;
5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
Vue.config.keyCodes.custom = 13;
<input type="text" @keydown.custom="test">
<div id="root"> <h2>欢迎来到{ {name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 //定义了一个别名按键 new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script>
11.姓名案例
1.用插值语法实现
属性:
data里的变量都是属性
data({
name : 'king'********这里的name就是属性名,king就是属性名
})
<!-- 准备好一个容器--> <div id="root"> 姓:<input type="text" v-model="firstName"> <br/><br/> 名:<input type="text" v-model="lastName"> <br/><br/> 全名:<span>{ {firstName}}-{ {lastName}}</span> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' } })
2.用methods实现
//一定要注意这里的{ {fullNmae()}}一定加括号,如果是给属性设置函数的话可以不加(v-model="lastName")
//当vue的方法所依赖的属性值发生变化时,vue就会重新读取一次,否则这只是读取缓存中的内容;
姓:<input type="text" v-model="firstName"> <br/><br/> 名:<input type="text" v-model="lastName"> <br/><br/> 全名:<span>{ {fullName()}}</span> //一定要注意这里的{ {fullNmae()}}一定加括号,如果是给属性设置函数的话可以不加(v-model="lastName") </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, methods: { fullName(){ console.log('@---fullName') return this.firstName + '-' + this.lastName //当vue的方法所依赖的属性值发生变化时,vue就会重新读取一次,否则这只是读取缓存中的内容; } }, })
3.计算属性实现(computed)
///computed就是计算属性(顾名思义)
//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
///此时的vm中是有fullNmae的,只不过这个是将计算后的结果给了fullName
<div id="root"> 姓:<input type="text" v-model="firstName"> <br/><br/> 名:<input type="text" v-model="lastName"> <br/><br/> 测试:<input type="text" v-model="x"> <br/><br/> 全名:<span>{ {fullName}}</span> <br/><br/> <!-- 全名:<span>{ {fullName}}</span> <br/><br/> 全名:<span>{ {fullName}}</span> <br/><br/> 全名:<span>{ {fullName}}</span> --> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', x:'你好' }, methods: { demo(){ } }, computed:{ ///computed就是计算属性(顾名思义) fullName:{ //get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值 //get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。 ///此时的vm中是有fullNmae的,只不过这个是将计算后的结果给了fullName get(){ console.log('get被调用了') // console.log(this) //此处的this是vm return this.firstName + '-' + this.lastName }, //set什么时候调用? 当fullName被修改时。 set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } })
4.计算属性的简写形式
简写形式前提条件—————当只调用,不该改变所依赖的属性值时
//注意这里的fullName还是个变量,他只是形式上的函数(fullName:function(){}所以调用时注意)
<div id="root"> 姓:<input type="text" v-model="firstName"> <br/><br/> 名:<input type="text" v-model="lastName"> <br/><br/> 全名:<span>{ {fullName}}</span> <br/><br/> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', }, computed:{ //简写 fullName(){ //注意这里的fullName还是个变量,他只是形式上的函数(fullName:function(){}所以调用时注意) console.log('get被调用了') return this.firstName + '-' + this.lastName } } })
12.天气案例
<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
例如:<button @click="changeWeather">切换天气</button>
//这里的changeWeather可以换成三目运算符(isHot ? '炎热' : '凉爽')
<div id="root"> <h2>今天天气很{ {info}}</h2> <!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 --> <!-- <button @click="isHot = !isHot">切换天气</button> --> <button @click="changeWeather">切换天气</button> //这里的changeWeather可以换成三目运算符 </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, }) </script>
13.监视属性
watch:{}-----监听事件
immediate:true, //初始化时让handler调用一下
//handler什么时候调用?当isHot发生改变时。
handler(newValue,oldValue){----handler可以得到属性值修改前后的值
<div id="root"> <h2>今天天气很{ {info}}</h2> <button @click="changeWeather">切换天气</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip &#