Vue学习笔记——1.基础入门

最新推荐文章于 2022-08-27 22:21:12 发布

原来是肖某人

最新推荐文章于 2022-08-27 22:21:12 发布

阅读量384

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_33905217/article/details/107667194

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

Vue学习笔记——1.基础入门

1.第一个Vue实例
2.Vue实例的生命周期
3.绑定数据
4.指令
5.计算属性
6.监听器

1.第一个Vue实例

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property是不会产生响应的

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

2.Vue实例的生命周期

图片引用自官方文档
图中标红的方法都是Vue留给我们进行拓展的方法，也就是我们常说的钩子函数/回调函数
其中在mounted的部分我们会发现有一个循环圆圈。这代表vue实例在完成渲染后进行对属性的监听，并对数据的改变做出响应，实现再次渲染。

3.绑定数据

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

在渲染阶段，vue会把{{ msg }} 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

v-once

通过使用 v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

<span v-once>这个将不会改变: {{ msg }}</span>

v-html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

前者会将html的标签当作字符串原封不动的打印出来
后者则会进行解释
注：直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板

v-bind

{{}}语法不能作用在 HTML的属性上，如果我们需要将属性值与data中属性绑定应该使用 v-bind 指令
该指令可以以：符号代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <span v-bind:title="msg">info</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                msg:'Hello World'
            }
        });
    </script>
</body>
</html>

4.指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript
表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-if/v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-if="ok">OK</h1>
        <h1 v-else>NOT OK</h1>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                ok:true
            }
        });
    </script>
</body>
</html>

v-on

该指令可以以@符号代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
        <input type="button" value="button" v-on:click="sayName">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:"张三"
        },
        methods:{
            sayName:function () {
                alert(this.name)
            }
        }
    });
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="i in names">{{i.name}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            names:[
                {name:"张三"},
                {name:"李四"}
            ]
        }
    });
</script>
</body>
</html>

v-model

该标签可以进行数据的双向绑定，即我们输入框中发生变化，vue中绑定的数据也发生变化。反之亦然
下面例子以文本框、多选框、单选框为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">{{msg}}
    <p></p>
    性别：
    <input type="radio" name="gender" v-model="gender" value="男">男
    <input type="radio" name="gender" v-model="gender" value="女">女
    <br>
    选中了{{gender}}
    <p></p>
    兴趣：
    <input type="checkbox" name="interest" v-model="interest" value="篮球">篮球
    <input type="checkbox" name="interest" v-model="interest" value="足球">足球
    <input type="checkbox" name="interest" v-model="interest" value="棒球">棒球
    <br>
    选中了{{interest}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:"123",
            gender:'',
            interest:[]
        }
    });
</script>
</body>
</html>

5.计算属性

计算属性，顾名思义，拥有计算行为的一个属性，该属性能够根据其他值进行计算返回一个属性值。
计算属性需要写在computed属性中。

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

该属性与方法类似，同样是调用方法返回一个值，但是不同的地方在于方法每次调用都会进行计算。而计算属性会在计算一次后将结果放入缓存，只要计算所依赖的值没有发生变化，该值也不会发生变化。

其实计算属性可以看作Java中具有get/set方法的成员变量，它默认只要get方法，而我们为其赋予的自定义方法就是为他赋予了get方法，当然也可以赋予set方法

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新.

6.监听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

原来是肖某人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记——1.基础入门

Vue学习笔记——1.基础入门1.第一个Vue实例2.Vue实例的生命周期3.绑定数据{{ msg }}v-oncev-htmlv-bind4.指令v-if/v-elsev-onv-forv-model5.计算属性6.监听器1.第一个Vue实例当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时
复制链接

扫一扫