提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue基础（一）

Vue基础
2023-09-11 14:20:08 时间

1.vue基础概念

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <!-- <p id="pp">我爱你赵丽颖</p> -->
    <p>{{msg}}</p>
    <!-- <a v-bind:href="url">点我去百度</a> -->
    <!-- 简写 -->
    <a :href="url">点我去百度</a>
    <p>{{msg.toUpperCase()}}</p>
    <p>{{msg+'哈哈'}}</p>

  </div>
  <script src="./js/vue.js"></script>


  <script>
    const vm = new Vue({
      //每一个页面都至少要有一个Vue的实例去对应
      //实例化vm对象的时候，要传一个配置对象，属性名固定，属性值可以更改的对象叫配置对象，axios({})也是
      el:'#root',//是一个字符串类型的数据，字符串是css选择器字符串
      //这个选择器选中的元素，被称作挂载点
      //挂载点的内部所有的东西叫模板，但是不包括挂载点本身
      //模板当中有模板语法：插值语法和指令语法
      // {{}}就是插值语法，它的作用是操作模板元素的内容
      // 指令语法有很多，我们先说一个v-bind: 它可以绑定数据到属性身上，数据是动态的，简写：就是冒号
      // 模板语法当中里面的数据都不再是静态的，而是动态的，而且是js表达式

      data:{
        msg:'woainiqiwei',
        url:'https://www.baidu.com',
        persons:[
          {id:1,name:'赵丽颖',age:33},
          {id:2,name:'杨幂',age:34},
          {id:3,name:'戚薇',age:40},
        ]
      }
      //data当中所有的属性数据，最终都会变为vm实例化对象身上的同名属性数据
      //模板当中所使用的所有数据看似是data里面的，其实拿的是vm的
    })
    
  </script>
</body>
</html>

 

2、数据绑定MVVM及事件的添加

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- v-bind:简写: -->
    <!-- <input type="text" :value="msg"> -->
    <input type="text" v-model="msg"> 
    <p>我爱你{{msg}}</p>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      // data:function(){
      //   this
      // },

      // data:() => {
      //   this
      // }
      //data有两种写法，一种是对象写法
      //另一种data的函数写法,要求必须return一个对象
      //数据的单相绑定其实说的就是指令v-bind:  只能从data中单向获取数据展示，并且和模板绑定到一起
      //数据的双向数据绑定说的一般就是表单类元素的v-model指令,只要以后我们看到了表单元素，几乎都双向
      // MVVM要深入理解
      data() {
        return {
          msg:'赵丽颖'
        }
      },
    })
  </script>
</body>

</html>

 

3，事件的绑定基础

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <!-- 点击事件 -->
    <!-- <p v-on:click="update">我爱你{{msg}}</p> -->
    <!-- 简写形式 -->
    <p @mouseenter="update">我爱你{{msg}}</p>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const vm = new Vue({
      // el:'#root',
      // data:{

      // },
      
      //属性
      data(){
        return {
          msg:'赵丽颖'
        }
      },
      //方法
      methods: {
        update(){
          //在vue的方法当中，this都是指向vm实例化对象的
          this.msg = '杨幂'
        }
      },
    })
    vm.$mount('#root')  //相当于el:'#root',


  </script>
</body>
</html>

 

4，Object.defineProperty使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let obj = {
      firstName:'zhao',
      lastName:'liying',
      // fullName:'zhaoliying'
    }

    // obj.fullName = 'zhaoliying'
    // console.log(obj)


    // obj.firstName = 'liu'
    // console.log(obj)
    //不管之前对象有没有这个属性
    //都可以使用
    //让这个属性变为一个响应式的属性（和别的数据有关联的，自己变,别的数据也变，别的数据变自己也变）
    Object.defineProperty(obj,'fullName',{
      get(){
        //getter 当读取这个属性的时候就会自动的调用get()
        return this.firstName + '-' + this.lastName
      },
      set(data){
        //setter 当写这个属性的时候，就会自动调用set()
        let arr = data.split('-')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    })
    // console.log(obj.fullName)  //自动调用get函数
    //覆盖之前的fullName
    obj.fullName = 'liu-liying' //自动调用set函数
    console.log(obj)  //{firstName: "liu", lastName: "liying"}
  </script>
</body>
</html>

 

5.计算属性-computed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    姓：<input type="text" v-model="firstName"> 
    名：<input type="text" v-model="lastName"> 
    姓名1(单向绑定)：<input type="text" v-bind:value="fullName1"> 
    姓名2(双向绑定)：<input type="text" v-model="fullName2"> 


    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>
    <p>{{fullName1}}</p>


  </div>
  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      el:'#root',
      data(){
        return {
          //写非函数数据
          firstName:'zhao',
          lastName:'liying'
        }
      },
      methods: {
        //我们写方法和函数
      },
      computed: {
        // fullName1:{
        //   //如果你的页面操作数据有读有写，那么get和set都得有
        //   get(){

        //   },
        //   //如果只有读取，set没必要写，set如果没必要写，那么可以简化写为一个方法
        //   set(){

        //   }
        // },

        fullName1(){
          //没有set方法，代表的就是get 只能读取
          console.log(11111)
          return this.firstName + '-' + this.lastName
        },

        fullName2:{
          //如果你的页面操作数据有读有写，那么get和set都得有
          get(){
            return this.firstName + '-' + this.lastName
          },
          //如果只有读取，set没必要写，set如果没必要写，那么可以简化写为一个方法
          set(value){
            let arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
          }
        },
        //什么时候用计算属性是我们大家刚开始想不到的
        // 当你有一个数据需要 但是不存在 又是根据已有的数据计算而来的 必然用到计算属性
      },
    })
  </script>
</body>
</html>

 

6,监视属性，watch

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
  </div>
  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      el:'#root',
      data:{
        firstName:'zhao',
        lastName:'liying',
        fullName:'zhao-liying'
      },
      watch:{
        //只监视firstName,新值和旧值
        firstName(newVal,oldVal){
          console.log(newVal,oldVal)
          this.fullName = newVal + this.lastName
        },
        lastName(newVal, oldVal){
          console.log(newVal, oldVal)
          this.fullName= this.firstName+ newVal
        }
        //什么时候用监视属性
        //属性值是存在的，才能监视   不存在需要计算
      }
    })
  </script>
</body>
</html>

 

相关文章