Vue基础

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];
        }
      }
    }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值