vue基础知识（一）

一、初识vue

MVVM模型：Model    View     ViewModel

<!-- 准备好一个容器 -->
	<div id="root">
		<h1>hello world,{{name}}</h1>
	</div>
	<script>
		//阻止vue在启动时生成生产提示
		Vue.config.productionTip = false;
		// 创建vue实例
		new Vue({
			el: '#root', //el用于指定当前vue实例为哪个容器服务
			//data中用于存储数据，数据供el所指定的容器所使用
			data: {
				name: 'hhh'
			}
		})
	</script>

容器与实例之间一一对应

el也可以写成v.$mount挂载

const v=new Vue({
      //el: '#app',
      data: {
        name: 'hello'
      }
    })
    v.$mount('#app')

data也可以写成函数型

data() {
        return {
          name: 'hello'
        }
      }

二、vue语法模板

<h1>hello world,{{name}}</h1>
<a v-bind:href="url">点我实现跳转</a>

三、vue数据绑定

单项数据绑定：<input type="text" :value="name">
双向数据绑定：<input type="text" v-model="name">

数据代理

let number=18
let person = {
      name: 'zhangsan',
      sex: 'nan',
      // age:18
    }
    Object.defineProperty(person, 'age', {
      /* value: 18,
      numerator: true,//属性是否可以枚举
      writableStream: true,//属性是否可以被修改
      configurable: true//属性是否可以被删除 */
      get() {
        return number
      },
      set(value) {
        console.log('有人修改了age属性');
        number=value
      }
    })
    console.log(person);

四、Vue事件处理

1.事件处理方法

 <script>
    const vm = new Vue({
      el: '#app',
      data: {
        name: 'hhhh'
      },
      methods: {
        showInfo(event) {
          alert(111)
        }
      },
    })
  </script>

2.事件修饰符

.prevent	阻止默认事件
.stop	阻止事件冒泡
.once	事件只触发一次
.capture	使用事件的捕获方式
.self	只有event.target是当前操作的元素才是触发事件
.passive	事件的默认行为立即执行，无需等待事件回调执行完毕

3.滚轮事件

- wheel鼠标滚轮事件
- scroll滚轮事件

4.键盘事件

回车enter   删除delete  退出esc  空格space  换行tab  上up  下down  左left  右right  切换大小写caps-lock

<input type="text" placeholder="按下回车提示输入" @keyup.enter="jp">
jp(e) {  
    console.log(e.target.value);
}

tab、alt、shift、meta键使用keydown

五、计算属性

所使用的属性不存在，要有通过原有属性计算，使用get，如果计算属性要被修改，必须写set函数去响应修改

<div id="root">
    姓：<input type="text" v-model="firstName"><br /><br />
    名：<input type="text" v-model="lastName"><br /><br />
    <!-- 姓名：<span>{{fullName()}}</span> -->
    姓名：<span>{{fullName}}</span>
  </div>
<script>
const vm = new Vue({
      el: '#root',
      data: {
        firstName: '张',
        lastName: '三',
        fullName:'张-三'
      },
      /*computed: {
        fullName: {
          //初次读取时，get就会被调用
          get() {
            return this.firstName + '-' + this.lastName
          },
          set(value) {
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
          }
        }
        //简写形式，考虑读取不考虑修改时使用
       /*  fullName(){
          return this.firstName + '-' + this.lastName
        } */
      }*/
      watch: {
        firstName(val) {
          this.fullName = val + '-' + this.lastName
        },
        lastName(val) {
          this.fullName = this.firstName + '-' + val
        }
      }
    })
</script>

//切换天气案例
<div id="app">
    <h2>今天天气很{{info}}</h2>
    <button @click="isHot = !isHot">切换天气</button>
  </div>
<script>
const vm1 = new Vue({
      el: '#app',
      data: {
        isHot: true
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      methods: {
        /* changetq() {
          this.isHot = !this.isHot
        } */
      },
    })
  </script>

六、监视属性(侦听属性)

 <div id="app">
    <h2>今天天气很{{info}}</h2>
    <button @click="isHot = !isHot">切换天气</button>
  </div>
  <script>
const vm1 = new Vue({
      el: '#app',
      data: {
        isHot: true
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      watch: {
        isHot: {
          immediate: true,//初始化时让handler调用
          handler(newValue, oldValue) {
            console.log('ishot被修改了', newValue, oldValue);
          }
        }
      }
    })
   /*  vm1.$watch('isHot', {
       immediate: true,//初始化时让handler调用
       handler(newValue, oldValue) {
         console.log('ishot被修改了', newValue, oldValue);
       }
     }) */
  </script>

1.深度监视

<div id="app">
<h2>a的值是：{{numbers.a}}</h2>
    <button @click="numbers.a++">点我让a+1</button>
    <h2>b的值是：{{numbers.b}}</h2>
    <button @click="numbers.b++">点我让b+1</button>
    <button @click="numbers={a:222,b:666}">彻底替换numbers</button>
  </div>
  <script>
const vm1 = new Vue({
      el: '#app',
      data: {
        numbers: {
          a: 1,
          b: 1
        }
      },
      watch: {
        //监测多级结构中某个属性的变化
        numbers: {
          deep: true,
          handler() {
            console.log('ab被改变了');
          }
        }
      }
    })
  </script>

简写形式

 isHot(newValue, oldValue) {
          console.log('ishot被修改了', newValue, oldValue);
},

 vm1.$watch('isHot', function () {
      console.log('ishot被修改了', newValue, oldValue);
    })

2.vue.set()使用

<div id="app">
    <h1>学校信息</h1>
    <h2>名称：{{name}}</h2>
    <h2>地址：{{address}}</h2>
    <hr />
    <h1>学生信息</h1>
    <button @click="addSex">添加一个性别属性</button>
    <h2>姓名：{{student.name}}</h2>
    <h2 v-if="student.sex">性别：{{student.sex}}</h2>
    <h2>年龄：真实年龄{{student.age.rage}}，对外年龄{{student.age.sage}}</h2>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        name: 'school',
        address: 'xxx',
        student: {
          name: 'hhh',
          //sex: '男',
          age: {
            rage: 40,
            sage: 29
          }
        }
      },
      methods: {
        addSex() {
          //Vue.set(this.student, 'sex', '男')
          this.$set(this.student, 'sex', '男')
        }
      },
    })
  </script>

删除数组中的某个元素

removeHbob() {
          this.student.hobby = this.student.hobby.filter((h) => {
            return h !== '抽烟'
          })
        }