Vue基础学习(1)

刘懿儇

已于 2023-09-24 17:13:24 修改

阅读量32

点赞数

文章标签： vue.js 学习 javascript

于 2023-09-24 17:13:22 首次发布

本文链接：https://blog.csdn.net/liu62615/article/details/133243141

版权

一.初识Vue

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;

2.root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法;

3.root容器里的代码被称为[Vue模板]:

4.Vue实例和容器是一一对应的;

5.真实开发中只有一个vue实例，并且会配合着组件一起使用;

6.{{xxx}中的xxx要写is表达式，且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会改变


<body>
    <div id="first">
        <h1>你好，{{name}}</h1>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示
        Vue.config.productionTip = false  

        //创建vue实例
        new Vue({
            el:'#first',//e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{      //data中用于存储数据，数据供e1所指定的容器去使用，值我们暂时先写成一个对象。
                name:'刘懿儇'
            }
        })

        
    </script>
</body>

二.模板语法

Vue模板语法有2大类: 1.插值语法: 功能:用于解析标签体内容。写法: {{xxx]}，xxx是js表达式，且可以直接读取到data中的所有属性

2。指令语法功能:用于解析标签(包括: 标签属性、标签体内容、绑定事件.....>

举例: v-bind:href="xxx”或简写为 :href="xxx"，xxx

同样要写js表达式且可以直接读取到data中的所有属性。

备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。

<body>
    <!-- 准备好一个容器-->
    <h1>dddddddddddd</h1>
    <div id="aaa">
        <h1>插值语法</h1>
        <h3>你好,{{name1}}</h3>
        <hr />
        <h1>指令语法</h1>
        <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a><br>
        <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    new Vue({   
        el: '#aaa',
        data: {
            name1: 'jack',
            school: {
                name: '你猜',
                url: 'http://www.atguigu.com',
            }
        }
    })
</script>

三.数据绑定

Vue中有2种数据绑定的方式:

1.单向绑定(v-bind): 数据只能从data流向页面。

2.双向绑定(y-model): 数据不仅能从data流向页面，还可以从页面流向data。

备注: 1.双向绑定一般都应用在表单类元素上(如: input、select等) 2.V-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<body>
    <div id="root">
      
        <label>
            单项数据绑定:
            <!--<input type='text' v-bind:value="name"/>-->
            <!--简写-->
            <input type='text' :value="name"/>
        </label>
        <label>
            双向数据绑定:
            <!--<input type='text' v-model:value="name"/>-->
            <input type='text' v-model="name"/>
        </label>
        <br/>
         <!--
         不是什么都可用v-model的 这里v-model不支持h1
         v-model只能应用在表单元素上(输入元素)，与用户交互(都有共同的value属性)
         -->
        <h1 v-bind:x="name">
            你好啊
        </h1>
    </div>
    <script type="text/javascript">
        //v-bind可以完成数据绑定(单项绑定)
        //v-model双向数据绑定
        //单项数据绑定 双向数据绑定
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data:{
                name: 'shanghai'
            }
        })
    </script>
</body>

四.el 和 data的两种写法

1.el有2种写法

(1).new Vue时候配置el届性。

(2).先创建Vue实例，随后再通过vm.$mount('#root)指定el的值。

2.data有2种写法

(1).对象式

(2).函数式如何选择: 目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错

3.一个重要的原则:

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了,就会变成windows页面本身了

<body>
   <div id="root">
    
       <h1>你好，{{ name }}</h1>
   </div>
   <script type="text/javascript">
       Vue.config.productionTip = false;
       //el的两种写法
       // const v = new Vue({
       //     // el: '#root', //第一种写法
       //     data: {
       //         name: '上海'
       //     }
       // });
       //
       // // console.log(v);
       // //关联root容器，用mount方法
       // setTimeout(() => {
       //     v.$mount('#root'); //第二种写法 挂载到页面上
       // }, 3000)

       //data的两种写法
       new Vue({
          el: '#root',
           //data的第一种写法:对象式
           // data: {
           //     name: 'shanghai'
           // }
           //第二种写法: 函数式(返回对象中包含你想渲染的模版数据)
           //学习组件的时候要是用函数式 这个函数是Vue来调用的
           // data: () => {
           //    console.log(`@@@@`, this); //此时this是window，因为箭头函数没有自己的this，它向外查找找到的window
           //    return ({
           //         name: 'shanghai'
           //     })
           // }
           //尽量不要写成剪头函数，因为会丢失this
           data (){
              console.log('@@@', this); //此时this是Vue
              return {
                  name: 'shanghai'
              }
           }
       });
   </script>
</body>
</html>

五.MVVM模型

MVVM模型

1.M: 模型(Model) : data中的数据 2。V:视图(view) : 模板代码 3。VM: 视图模型(viewModel): Vue

实例观察发现:

1.data中所有的属性，最后都出现在vm身上。 2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用

<body>
      
    <div id="root">
        <!--view-->
        <h1>学校名称: {{ name }}</h1>
        <h1>学校地址:{{ address }}</h1>
        <h1>测试一下1:  {{ 99+1 }}</h1>
        <!--所有viewModel和vue原型上的属性在视图中的{{}}都可以看到-->
<!--        <h1>测试一下2: {{ $options }}</h1>-->
<!--        <h1>测试一下3: {{ $emit }}</h1>-->
<!--        <h1>测试一下4: {{ _c }}</h1>-->
    </div>
    <script type="text/javascript">
        //view model view与model之间的纽带
        //vm view实例对象
        const vm =  new Vue({
            el: '#root',
            data(){
                //model
                return {
                    name:'科院',
                    address: '新乡'
                }
            }
        });
        console.log(vm);
    </script>
</body>
</html>

六.数据代理

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data中对应的属性。

<body>
        
     <div id="root">
         <h2>学校名称:{{ name }}</h2>
         <h2>学校地址: {{ address }}</h2>
     </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        let data;
        //通过vm代理
        const vm = new Vue({
           el:'#root',
            //vm._data === options.data = data
            //
           data(){
               return data = {
                   name:'panyue',
                   address:'shanghai'
               }
           }
        });
    </script>
</body>

七.事件处理

1.事件修饰

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<body>
         
   <div id="root">
       <h1>欢迎来到 {{ name }}</h1>
       <!--阻止默认事件（常用-->
       <a href="https://www.baidu.com" @click.prevent="showInfo" >点我提示信息</a>
       <!--阻止事件冒泡（常用）-->
       <div class="demo1" @click="showInfo">
           <button @click.stop="showInfo">点我提示信息</button>
           <!--修饰符也可以连用，例如下面事例是即阻止冒泡同时也阻止默认行为-->
           <!--<a href="https://www.google.com.tw" @click.prevent.stop="showInfo">谷歌台湾</a>-->
       </div>
       <!--事件只触发一次-->
       <button @click.once="showInfo">点我提示信息,只在第一次点击生效</button>
       <!-- capture事件的捕获模式 让事件以捕获的方式来处理(先捕获再冒泡)-->
       <div class="box1" @click.capture="showMsg(1)">
           div1
           <div class="box2" @click="showMsg(2)">div2</div>
       </div>
       <!-- self 只有event.target是当前操作的元素时才触发事件(变相阻止冒泡)-->
       <div class="demo1" @click.self="showInfo">
           <button @click="showInfo">点我提示信息</button>
       </div>
       <!--passive：事件的默认行为立即执行，无需等待事件回调执行完毕；-->
       <!--scroll滚动条一滚动就会触发的事件 wheel鼠标滚轮事件-->
       <ul class="list" @scroll.passive="demo">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ul>
   </div>
   <script type='text/javascript'>
       Vue.config.productionTip = false;
       new Vue({
           el: "#root",
           data:{     
                   name: 'Shanghai'         
           },
           methods:{
               showInfo(e){
                   // e.preventDefault(); 阻止a标签默认行为
                   // e.stopPropagation() //阻止事件冒泡
                   // alert('你好');
                   console.log(e.target);
               },
               showMsg(msg){
                   console.log(msg);
               },
               demo(){
                   // console.log(`@`)
                   // for(let i = 0; i < 100000; i++){
                   //     console.log('#')
                   // }
                   // console.log('累了')
               }
           }
       });
   </script>
</body>

2. 事件的基本使用

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；

5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<body>
       
    <div id="root">
        <!--指令语法 v开头 例如v-on:click点击事件-->
        <h1>欢迎 {{ name }} </h1>
        <button v-on:click="showInfo1">点我提示信息1</button>
        <!--简写形式 @click-->
        <button @click="showInfo2($event,66)">点我提示信息2</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data(){
                return {
                   name: 'shanghai',

                }
            },
            //methods配置事件处理的回调函数
            methods:{
                showInfo1(e){
                    //默认给你传递event参数
                    //当是箭头函数的话this那就是window
                    console.log(this === vm); //this是vue实例
                    console.log('你好');
                },
                //接收参数
                showInfo2(e,num){
                    console.log(e.target);//
                    console.log(`接收参数：${num}`);
                }
            }
        });


    </script>
</body>

3.键盘事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<body>
    
  <div id="root">
        <!--vue中键盘事件的绑定 一般用keyUp(keydown)-->
        <h1>欢迎来到{{ name }}</h1>
        <input type="text" @keyup.enter="showInfo" placeholder="按下回车提示输入"/>
        <input type="text" @keyup.delete="showInfo" placeholder="退格或删除提示输入"/>
        <input type="text" @keyup.esc="showInfo" placeholder="按下esc提示输入"/>
        <input type="text" @keydown.tab="showInfo" placeholder="按下tab示输入"/>
        <input type="text" @keyup.ctrl="showInfo" placeholder="按下command提示输入"/>
        <input type="text" @keydown.p="showInfo" placeholder="按下p提示输入"/>
        <!--键盘事件的修饰符也可以连用-->
       <input type="text" @keydown.command.g="showInfo" placeholder="按下command和g提示输入"/>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                name: 'shanghai'
            },
            methods:{
                showInfo:function (e){
                    // if(e.keyCode === 13) {
                    //     console.log(e.target.value);
                    // }
                    console.log(e.target.value);
                    console.log(e.key); //按下的名字
                }
            }
        })
    </script>
</body>

八.计算属性

案例--插值语法实现

<body>
    <div id="root">
        <!--v-model双向绑定-->
        姓:<input type="text" v-model="firstName"/>
        <br/><br/>
        名:<input type="text" v-model="lastName"/>
        <br/><br/>
        全名: <span>{{ firstName.slice(0,3) }} - {{ lastName }}</span>
    </div>
    <script type="text/javascript">
        new Vue({
           el:'#root',
           data:{
               firstName:'张',
               lastName: '三'
           }
        });
    </script>
</body>

案例--methods方法实现

<body>
    <div id="root">
        <!--v-model双向绑定-->
        姓:<input type="text" v-model="firstName"/>
        <br/><br/>
        名:<input type="text" v-model="lastName"/>
        <br/><br/>
        <!--methods方法调用之后进行插值-->
        <!--data中的数据发生变化的话，要重新解析和react类似，state一变化页面重新render-->
        全名: <span>{{ fullName() }}</span>
    </div>
    <script type="text/javascript">
        new Vue({
           el:'#root',
           data: {
               firstName: '张',
               lastName: '三'
           },
           methods:{
               fullName(){
                   return `${this.firstName.slice(0,3)} -- ${this.lastName}`
               }
           }
        });
    </script>
</body>

案例-计算属性实现

<body>
<div id="root">
    <!--
			计算属性：
					1.定义：要用的属性不存在，要通过已有属性计算得来。
					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
					3.get函数什么时候执行？
								(1).初次读取时会执行一次。
								(2).当依赖的数据发生改变时会被再次调用。
					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
					5.备注：
							1.计算属性最终会出现在vm上，直接读取使用即可。
							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
		 -->
    <!--v-model双向绑定-->
    姓:<input type="text" v-model="firstName"/>
    <br/><br/>
    名:<input type="text" v-model="lastName"/>
    <br/><br/>
    测试:<input type="text" v-model="test"/>
    <br/><br/>
    全名: <span>{{ fullName }}</span>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            //data里的都是属性
            firstName: '张',
            lastName: '三',
            test:'test'
        },
        //计算属性--> 旧属性加工
        computed: {
            fullName: {
                //get的作用，当读取fullName时get就会被调用，且返回值就做为fullName的值
                //defineProperty
                //注意vm._data是不存在计算属性的
                //计算属性算完之后直接丢到了viewModel实例对象身上
                /**
                 * get的调用时机
                 * 1.初次读取计算属性时
                 * 2.所依赖的数据(data中的属性)发生变化时，不改变的话直接读缓存
                 * 3.methods没有缓存，读几次就调用几次无论要用的数据是否发生变化
                 *  @returns {string}
                 */
                get(){
                    //此时get函数中的this指向是vm
                    console.log('get调用了', this);
                    return this.firstName + '--' + this.lastName
                },
                /**
                 * set什么时候调用
                 *   1.当fullName被修改时
                 * @param value
                 */
                set(value){
                    //修改计算属性所依赖的普通属性(放在data里面的)
                    //this === vm
                    const [ firstName, lastName ] = value.split('-');
                    this.firstName = firstName;
                    this.lastName = lastName; //依赖属性发生改变之后,计算属性自动改变
                }
            }
        }
    });
</script>
</body>

计算属性简写

<body>
<div id="root">
    <!--v-model双向绑定-->
    姓:<input type="text" v-model="firstName"/>
    <br/><br/>
    名:<input type="text" v-model="lastName"/>
    <br/><br/>
    测试:<input type="text" v-model="test"/>
    <br/><br/>
    全名: <span>{{ fullName }}</span>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            //data里的都是属性
            firstName: '张',
            lastName: '三',
            test:'test'
        },
        //计算属性--> 旧属性加工
        computed: {
            //简写形式
            //前提:计算属性只考虑读取不考虑修改 set丢了
            //简写计算书写为一个函数(这个函数当成getter使用), 注意不要写箭头函数
            //执行完getter之后，vm直接保存返回的数据为fullName属性的属性值,此时vm.fullName不是函数而是一个确切的计算值
            fullName: function (){
                return this.firstName + '--' + this.lastName;
            }
     }});
</script>
</body>

九.监视属性

1.监视属性

               监视属性watch：
                   1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
                   2.监视的属性必须存在，才能进行监视！！
                   3.监视的两种写法：
                           (1).new Vue时传入watch配置
                           (2).通过vm.$watch监视

<body>
<div id="root">
         <!--
				监视属性watch：
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在，才能进行监视！！
					3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
    <h1>今天天气很 {{ info }}</h1>
    <button @click="changeWeather">
        切换
    </button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            isHot: true
        },
        //计算属性
        computed: {
            info(){
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        //改变模版数据的方法
        methods:{
            changeWeather(){
                this.isHot = !this.isHot;
            }
        },
        // watch:{
        //     //监视的配置对象
        //     //watch不仅能监视data的普通属性，也可以检测计算属性
        //     isHot:{
        //         immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
        //         //handler 什么时候调用呢
        //         //当isHot发生改变就会调用该函数
        //         //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
        //         handler(newValue, preValue){
        //             console.log('ishot 被修改了');
        //             console.log(`newValue: ${newValue}, preValue: ${preValue}`);
        //         }
        //     }
        // }
    });
    //watch的第二种写法，直接采用vm对象实例
    vm.$watch('isHot', {
        immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
        //handler 什么时候调用呢
        //当isHot发生改变就会调用该函数
        //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
        handler(newValue, preValue){
            console.log('ishot 被修改了');
            console.log(`newValue: ${newValue}, preValue: ${preValue}`);
        }
    });
</script>
</body>

2.深度监视

深度监视：
               (1).Vue中的watch默认不监测对象内部值的改变（一层）。
               (2).配置deep:true可以监测对象内部值改变（多层）。
       备注：
               (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以(想让它可以则配置deep:true)！
               (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

<body>
<div id="root">
    
    <h1>今天天气很 {{ info }}</h1>
    <button @click="changeWeather">
        切换
    </button>
    <hr/>
    <h3>a的值是:{{ numbers.a }}</h3>
    <button @click="numbers.a++">
        点我让a加一
    </button>
    <h3>b的值是:{{ numbers.b }}</h3>
    <button @click="numbers.b++">
        点我让b加一
    </button>
    <h1>
        测试vue自身监测数据属性
        {{ numbers.d.e }}
    </h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            isHot: true,
            numbers:{
                a:1,
                b:1,
                d:{
                    e:2
                }
            }
        },
        //计算属性
        computed: {
            info(){
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        //改变模版数据的方法
        methods:{
            changeWeather(){
                this.isHot = !this.isHot;
            }
        },
        watch:{
            //监视的配置对象
            //watch不仅能监视data的普通属性，也可以检测计算属性
            isHot:{
                //immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
                //handler 什么时候调用呢
                //当isHot发生改变就会调用该函数
                //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
                handler(newValue, preValue){
                    console.log('ishot 被修改了');
                    console.log(`newValue: ${newValue}, preValue: ${preValue}`);
                }
            },
            //监测多级结构里面的属性 深度监视
            // 'numbers.a':{
            //     handler(){
            //       console.log('a发生改变了')
            //     }
            // }
            //深度监视numbers中的所有属性
            numbers:{
                deep: true, //监视多级结构的属性
                handler(){
                    console.log('numbers 发生改变')
                }
            }
        }
    });

</script>
</body>

3.监视的简写形式

body>
<div id="root">
    <h1>今天天气很 {{ info }}</h1>
    <button @click="changeWeather">
        切换
    </button>
    <hr/>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            isHot: true,
        },
        //计算属性
        computed: {
            info(){
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        //改变模版数据的方法
        methods:{
            changeWeather(){
                this.isHot = !this.isHot;
            }
        },
        // watch:{
        //     //监视的配置对象
        //     //watch不仅能监视data的普通属性，也可以检测计算属性
        //     // isHot:{
        //     //     //immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数
        //     //     //handler 什么时候调用呢
        //     //     //当isHot发生改变就会调用该函数
        //     //     //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值
        //     //     //deep: true  //简写
        //     //     handler(newValue, preValue){
        //     //         console.log('ishot 被修改了');
        //     //         console.log(`newValue: ${newValue}, preValue: ${preValue}`);
        //     //     }
        //     // }
        //     //简写:
        //     //简写的前提watch的属性不需要immediate和deep属性的时候
        //     // isHot(newValue, preValue){
        //     //     console.log(newValue,preValue);
        //     // }
        // }
    });
    //完整写法
    // vm.$watch('isHot', {
    //     deep: true,
    //     immediate: true,
    //     handler(newValue, preValue){
    //         console.log(newValue, preValue);
    //     }
    // });
    //简写 (代价就是不能配置其他配置项deep immediate)
    vm.$watch('isHot', function (newValue, preValue){
        //this === vm
        console.log(newValue, preValue);
    })
</script>
</body>

4.computed和watch的区别

computed和watch之间的区别：
                   1.computed能完成的功能，watch都可以完成。
                   2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
               两个重要的小原则：
                   1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
                   2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
                   这样this的指向才是vm 或组件实例对象。

<body>
    <div id="root">
      
        姓:<input type="text" v-model="firstName"/>
        <br/><br/>
        名:<input type="text" v-model="lastName"/>
        <br/><br/>
        测试:<input type="text" v-model="test"/>
        <br/><br/>
        全名: <span>{{ fullName }}</span>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data: {
                //data里的都是属性
                firstName: '张',
                lastName: '三',
                fullName:'张-三',
                test:'test'
            },
            watch:{
                //这里不需要深度监视则简写 监视firstname lastname
                //计算属性不能开启异步操作更新
                firstName(newF){
                    //this === vm
                    setTimeout(() => {
                        //继承外部作用域的this//注意此时的函数写成箭头函数(因为它并不是由vue来调用的)
                        //如果写成function(){}的形式 this === window,则无法更新watch属性
                        //异步
                        this.fullName = newF +  '-' + this.lastName;
                    }, 1000);
                },
                lastName(newL){
                    this.fullName = this.firstName + '-' + newL;
                }
            }
         });
    </script>
    </body>

刘懿儇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue基础学习(1)

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;2.root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法;3.root容器里的代码被称为[Vue模板]:4.Vue实例和容器是一一对应的;5.真实开发中只有一个vue实例，并且会配合着组件一起使用;6.{{xxx}中的xxx要写is表达式，且xxx可以自动读取到data中的所有属性7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会改变。
复制链接

扫一扫