Vue基础

最新推荐文章于 2024-05-17 17:18:49 发布

PromiseXuu

最新推荐文章于 2024-05-17 17:18:49 发布

阅读量299

点赞数

分类专栏： Vue 文章标签： Vue MVVM 模板语法计算属性和监视

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

本文链接：https://blog.csdn.net/xzz2222/article/details/81058168

版权

Vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

MVVM

M：Model 模型，数据对象（data)
V:view 视图，模板页面，显示数据
VM：ViewModel 视图模型(vue实例对象）

模板语法

模板语法：就是动态的HTML页面中，包含一些JS代码，包括指令（v-开头的属性），双大括号表达式
双大括号表达式
指令一：强制数据绑定
指令二：绑定事件监听

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
//html动态页面
  <div id="app" v-model="name">

  <h1>1、双大括号语法</h1>
    <p>{{name}}</p>
    <h1>{{name.toUpperCase()}}</h1>

    <p v-text="name"></p>     <!--textContent-->
    <p v-html="name"></p>    <!--innerHTML-->

  <h1>2、强制数据绑定</h1>
    <img v-bind:src="imgUrl">
    <!--简写-->
    <img :src="imgUrl">

  <h1>3、绑定事件监听</h1>
    <button v-on:click="test">test</button>
    <!--简写-->
    <button @click="test">test</button>
    <!--事件绑定：含参数-->
    <button @click="test2(name)">test2</button>
  </div>

//JS代码
    //引入
<script type="text/javascript" src="js/vue.js"></script>

<script type="text/javascript">
  new Vue({
    el:'#app',    //范围
//    数据卸载data对象中
    data:{
      name:'<a href="http://www.baidu.com">hello</a>',
      imgUrl:'https://cn.vuejs.org/images/logo.png'
    },
//    方法写在methods对象中
    methods:{
      test(){
       alert('hehe');
      },
      test2(content){
        alert(content);
      }
    }
  })
</script>
</body>
</html>

计算属性和监视

页面准备工作

代码实现：

姓：<input type="text" placeholder="firstName" v-model="firstName">
名：<input type="text" placeholder="lastName" v-model="lastName">
全名计算属性：<input type="text" placeholder="fullNameC" v-model="fullNameC">
全名监视：<input type="text" placeholder="fullNameW" v-model="fullNameW">
全名双向通信：<input type="text" placeholder="fullNameS" v-model="fullNameS">

1、计算属性的基本使用

计算属性是针对复杂的逻辑设计，以下为代码的实现：

    //引入
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript">
    // 实例化Vue
      let vm = new Vue({
        el:'#app',
        data:{
          firstName:'刘',
          lastName:'昊然',
        },
    //    计算属性，利用了属性的getting
        computed:{
    // 执行fullNameC计算函数
          fullNameC(){
    //  返回相应的结果
            return this.firstName +' '+ this.lastName;
          }
        },
      });
    </script>

2、监听

watch属性：同样监听属性的变化值，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。两种方法，一种是直接在vm实例对象中定义watch方法，另一种是调用实例对象的vm.$watch()方法
    <script type="text/javascript">
// 实例化Vue
  let vm = new Vue({
    el:'#app',
    data:{
      firstName:'刘',
      lastName:'昊然',
      fullNameW:'刘昊然'
    },
//    监视属性
    watch:{
      firstName:function(value){
        this.fullNameW = value +' '+ this.lastName;
       }
    }
  });
//  监听属性2
  vm.$watch('lastName',function (value) {
    console.log(this)
    this.fullNameW = this.firstName +' '+ value;
  })
</script>

3、计算属性之set与get：数据通信双向改变

利用计算属性的set和get，

  let vm = new Vue({
    el:'#app',
    data:{
      firstName:'刘',
      lastName:'昊然',
      fullNameW:'刘昊然',
    },
//    计算属性，利用了属性的getting函数
    computed:{
      fullNameS:{
//        回调函数，计算并返回当前函数的值
//        回调函数：1 你定义了 ；2 你没有调用 ；3 最终执行了
        get(){
          return this.firstName +' '+ this.lastName;
        },
//        回调函数，根据属性值的变化，更新相应的属性数据
        set(value){
//          利用空格截取字符串，返回的是一个数组。
          let arr = value.split(' ');
          this.firstName = arr[0];
          this.lastName = arr[1];
        }
      }
    }
})