Vue基础

最新推荐文章于 2020-06-23 10:49:14 发布

Aeroball

最新推荐文章于 2020-06-23 10:49:14 发布

阅读量85

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46034226/article/details/103744216

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一. 第一个VUE程序

1.1 引入js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2 给dom元素定义id

    <div id="app">
       {{msg}}
    </div>
    注意：一定要有根元素包含

1.3 vue代码编写

    new Vue({
        el: "#app",
        data() {
            return {
                msg: "hello world"
            }
        }
    });

二. 基本指令

v-text：用于操作纯文本，它会代替显示对应的数据对象上的值，可以简写为{{}}，即插值表达式。
v-html：将内容以html的形式呈现在页面
v-model：双向数据绑定
v-if：值如果为true则显示标签，如果为false会移除标签
v-else-if：和v-if配合使用
v-else：和v-if配合使用
v-for：循环遍历。语法形式为v-for=“item in list”
v-show：值为true则显示信息，如果为false则隐藏标签（相当于display=“none”，而v-if是将标签移除）
v-on:click：点击事件，可以简写为@click
v-bind：将值绑定到标签的自定义属性上，形式为v-bind:title=“mytitle”，可以简写为 :title=“mytitle”

<body>
    <div id="app">
        <p v-text="name"></p>
        <p v-text="htmlText"></p>
        <p v-html="htmlText"></p>
        <p v-if="age > 40">
            中年
        </p>
        <p v-else>
            青年
        </p>
        <ul>
            <li v-for="user in users">
                {{user.age}} -- {{user.name}}
            </li>
        </ul>
<!--        v-show和v-if区别，v-show不匹配只是加上display=none样式，而v-if则是整个done树节点不会加载-->
        <div v-show="age > 10">
            v-show: 年龄大于20岁
        </div>
        <div v-if=" age > 30">
            v-if：年龄大于30岁
        </div>
        <!-- v-on可以直接使用 @符号来代替 -->
        <button @click="getAge">点击</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                name: '张三',
                htmlText: '<a href="http://www.baidu.com">百度</a>',
                age: 20,
                users: [
                    {age: 10, name: 'zhangsan'},
                    {age: 20, name: 'lisi'},
                    {age: 30, name: 'wangwu'}
                ]
            }
        },
        method: {
            getAge(){
                // 如果method中要使用 vue data中的数据，都需要带上this
                alert(this.age);
            }
        }
    })
</script>

三. 计算属性与监听器

3.1 计算属性

计算属性是用来存储数据的，而且数据可以进行逻辑操作，是基于其依赖的进行更新，只有在相关依赖发生变化的时候才会更新，计算属性是缓存的，只有相关依赖不发生变化，多次访问属性值是之前计算得到的值，并不会多次执行。计算属性的属性名不需要纳入Vue的数据对象中。

3.2 监听器

所谓的监听器就是可以通过watch的方式观察某个属性的变化，然后做出相应的处理。

3.3 案例

    <div id="app">
        FirstName: <input type="text" v-model="firstName"> <br>
        LastName: <input type="text" v-model="lastName"> <br>
        FullName(单向数据绑定): <input type="text" v-model="fullName1"> <br>
        FullName(单向数据绑定): <input type="text" v-model="fullName2"> <br>
        FulltName(双向数据绑定): <input type="text" v-model="fullName3"> <br>
    </div>

对应的js代码如下：

<script>
    new Vue({
        el: '#app',
        data(){
            return{
                firstName: '',
                lastName: '',
                fullName2: '',
            }
        },
        //计算属性
        computed:{
            fullName1: function() {
                let firstName = this.firstName;
                let lastName = this.lastName;
                return firstName + ' ' + lastName;
            },
            fullName3: {
                // 中只要牵扯到属性发生变化，该方法就会得到触发。
                get() {
                    let firstName = this.firstName;
                    let lastName = this.lastName;
                    return firstName + ' ' + lastName;
                },
                // fullName3发生变化，该方法会得到触发
                set(value) {
                    let names = value.split(/\s+/);
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        },
        //侦听器
        watch: {
            firstName: function(newVal, oldVal) {
                //console.log(newVal, oldVal);
                this.fullName2 = newVal + ' ' + this.lastName;
            },
            lastName: function(newVal, oldVal) {
                this.fullName2 = this.firstName + ' ' + newVal;
            }
        }
    })
</script>

注意：methods、computed和watch的区别

计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。

侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

1. computed和methods
    - 共同点：computed能实现的methods也能实习那
    - 不同点：computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。
             而只要它的相关依赖没有发生变化，多次访问会立即返回之前的计算结果，而不必再次执行计算。
             相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。也就是说当我们不希望有缓存时，就用方法替代。

2. watch和computed
    - 共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生变化的时候，
              被依赖的数据根据预先定义好的函数，发生“自动”变化。
    - 不同点：
            1. watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。
            2. 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。

演示：当一个值改变了需要1s之后显示到页面中，通过watch可以轻松的实现

  <div id="app">
    <div>
      {{msg}}
    </div>
    <div>
      {{newValue}}
    </div>
    <button @click="handleClick">点击</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        newValue: ''
      },
      methods: {
        handleClick () {
          this.msg = 'hello1'
        }
      },
      watch: {
        msg (newValue) {
          setTimeout(() => {
            this.newValue = newValue
          }, 1000);
        }
      }
    })
  </script>

使用计算属性无法在里面写一些异步逻辑

  <div id="app">
    <div>
      {{msg}}
    </div>
    <div>
      {{newValue}}
    </div>
    <button @click="handleClick">点击</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        temp: ''
      },
      computed: {
        newValue () {
          if (this.temp) {
            // 不能写异步
            // setTimeout(() => {
            //   return msg
            // }, 1000);
            return this.msg
          } else {
            return this.temp
          }
        }
      },
      methods: {
        handleClick () {
          this.msg = 'hello1'
          this.temp = 'hello1'
        }
      }
    })
  </script>

Aeroball

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础

一. 第一个VUE程序1.1 引入js<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>1.2 给dom元素定义id <div id="app"> {{msg}} </div> 注意：一定要有根元素包含1.3 vue...
复制链接

扫一扫

专栏目录