Vue学习笔记------Vue入门（一）

Vue是什么

• Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue的特点

1. 遵循MVVM模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

起步

1. 创建一个html文件，引入vue.js

2. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

3. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

4. root容器里的代码被称为【Vue模板】

5. Vue实例和容器是一一对应的

6. 真实开发中只有一个Vue实例，并且会配合着组件一起使用

7. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

8. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

   注意区分：js表达式 和 js代码(语句)

   1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

        1. a
        2.  a+b
        3.  demo(1)
        4.  x === y ? 'a' : 'b'
      

   2. 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大类：

1. 插值语法：

   1. 功能：用于解析标签体内容
   2. 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

2. 指令语法：

   1. 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
   2. 举例：v-bind:href="xxx"或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性
   3. 备注：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种数据绑定的方式

1. 单向绑定（v-bind）：数据只能从data流向页面

2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

   备注：

   1. 双向绑定一般都应用在表单类元素上（如：input、select等）
   2. 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的两种写法

1. el有2种写法
   1. new Vue时候配置el属性
   2. 先创建Vue实例，随后再通过vm.$mount(‘#app’)指定el的值
2. data有2种写法
   1. 对象式
   2. 函数式
3. 一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
4. 如何选择：目前哪种写法都可以，以后学习到组件时，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模型

1. M：模型(Model) ：对应 data 中的数据

2. V：视图(View) ：模板

3. VM：视图模型(ViewModel) ： Vue 实例对象
   

• 观察发现：
  • data中所有的属性，最后都出现在了vm身上
  • vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用

数据代理

理解Object.defineProperty方法

1. 作用：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

2. 语法：Object.defineproperty( object，‘ propName ’ ，descriptor)

3. 参数详解：

   1. object ：要定义属性的对象，返回的也是
   2. propName ：要定义或修改的属性的名称
   3. 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中的数据代理

1. 概念：通过vm对象来代理data对象中属性的操作（读/写）

2. 好处：更方便的操作data中的数据

3. 基本原理：

   1. 通过Object.defineProperty()把data对象中所有属性添加到vm上
   2. 为每一个添加到vm上的属性，都指定一个getter/setter
   3. 在getter/setter内部去操作（读/写）data中对应的属性
      

事件处理

事件的基本使用：

1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，不要用箭头函数，否则this的指向就不是vm了
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
5. @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>
      
      <div @click.self="demo" style="height: 40px;background-color: aqua">
          <button @click="demo1">点我不会heiheibutton>
      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')
          }
      }
  })
  

键盘事件

1. Vue中常用的按键别名：
   1. 回车 => enter
   2. 删除 => delete (捕获“删除”和“退格”键)
   3. 退出 => esc
   4. 空格 => space
   5. 换行 => tab (特殊，必须配合keydown去使用)
   6. 上 => up
   7. 下 => down
   8. 左 => left
   9. 右 => right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
   1. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
   2. 配合keydown使用：正常触发事件
4. 也可以使用keyCode去指定具体的按键（不推荐）
5. 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>

​
​
​
​
​
​
​