vue基础实践1:vue基础语法

vue基础实践1:vue基础语法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <div id="app">
     {{obj}}
      <br>
     {{arr}}
     <br>
     {{'name' in obj ? 'ok' : 'no'}}
    div>
body>

<script src="node_modules/vue/dist/vue.min.js">script>
<script>
    let obj = {
        // name: ''
    };
    let arr = [10];
    let vm = new Vue({
        //=>基于querySelector获取视图容器:指定的容器不能是HTML和BODY
       el:'#app',
       data: {
            /*  胡子语法中绑定的数据值是对象类型,会基于JSON.stringify把其编译为字符串呈现出来(而不是直接toString直接处理)

               并不是所有的数据绑定都会重新渲染视图  
               1.初始数据是一个对象,对象中没有xxx键值对,后期新增的键值对是不会让视图重新渲染
             * + 解决办法:  最好在初始化数据的时候,就把视图需要的数提前声明好(可以是空值,但是要有这个属性)=> 原理:只有DATA中初始化过的属性才有GET/SET
              + 不要修改某个属性名,而是把对象的值整体替换(指向新的堆内存)
              + 可以基于vm.$set 内置方法修改数据:vm.$set(obj,key,value)
               2.如果数据是一个数组,我们修改数据基于ARR[N]=xxx或者ARR.length--等操作方式,是无法让视图重新渲染的,需要基于:
               + push/pop等内置方法
               + 重新把ARR的值重写(指向新的堆内存)
               + vm.$set
            */ 
            obj,
            arr,
       },
    });
    setTimeout(() =>{
        // vm.arr[1] =20;
        // vm.arr.length--;
        //给数组新增值3种方式
       // vm.arr = [...arr, 20];
        vm.arr.push(20);

       // vm.$set(vm.arr, 1,20);
        //vm.obj.name = "前端语法" 
        //$set是vue内置方法 $set(对象,属性名,内容)
         vm.$set(vm.obj,'name','前端语法');
      
    
    },1000);
script>
html>

运行结果如下:
vue基础实践1:vue基础语法_第1张图片

你可能感兴趣的:(实践真题系列,实践系列,Vue系列,vue,vue基础语法)