简单谈谈vue的属性。。。

最新推荐文章于 2024-04-23 09:40:10 发布

南北北南

最新推荐文章于 2024-04-23 09:40:10 发布

阅读量703

点赞数 1

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

本文链接：https://blog.csdn.net/c_lam_e/article/details/79014548

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

谈谈vue的属性

data。。。。只有当实例被创建时存在的属性才是响应式的，、当这些属性的值发生改变，视图也将会产生响应。。如果有的属性你将来会用到，但现在还不知道值，可以设置一些初始值

data {
    todo: '',
    lis: true,
    a1: 34,
    arr: [],
    error: null    
}

但要注意下面的方法，会阻止修改现有的属性，即当data中的属性发生变化时，视图也不会产生响应。。。

Object.freeze(arr)       //数组arr将不会再产生响应

生命周期钩子函数—给用户在不同阶段添加自己代码的机会

* created，实例被创建之后执行的代码
* mounted
* destroyed
* updated
* computed    计算属性
* methods    方法属性
* watch      监听属性

vue的模板语法
允许开发者声明式的将DOM绑定至底层Vue实例的数据。

涉及到的指令
    v-once------执行一次性的插值，当数据改变时，插值处的内容不会更新。
    v-html-------双大括号命令会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，可以使用该命令。


<body>
    <div id="app">
        <p>{{html1}}</p>
        <p v-html="html1"></p>
        <div v-once>这个会发生改变吗：{{a}}</div>
        <div>这个呢：{{a}}</div>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                a: 10,
                html1: "<b>这是文本格式还是html格式？</b>"
            }
        });
    </script>
</body>

代码效果图1
从上图看出，v-once达到了仅一次加载的效果

谈谈指令
指令（directives）是带有 v- 前缀的特殊指令。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式得而作用于DOM。
一些指令能够接收一个参数，子啊指令名称之后以冒号表示，例如，v-bind指令可以用于响应式的更新html属性。

<a v-bind:href="url"></a>

vue中的修饰符，以 . 连接。

关于vue中缩写的应用

vue为v-bind和v-on两个使用较为频繁的指令提供了特定简写：

<a v-bind:href="../html/start.html"></a>
<a :href="../html/start.html"></a>
<div v-on:click="clc"></div>
<div @click="clc"></div>

谈谈vue中的计算属性

vue 的计算属性可以像普通属性一样被绑定。。计算属性是一个属性，不是一个方法，虽然他能达到一个方法所能达到的效果。

<p>{{ vmMessage }}</p>

data: {
a: 10,
vmReverse: 'hello,Vue.js',
html1: "<b>这是文本格式还是html格式？</b>"
},

computed: {
vmMessage: function(){
return this.vmReverse.split('').reverse().join('');
}
}

谈谈计算属性缓存与方法的差别

其实计算属性和方法都可以达到一样的效果，那为什么计算属性和方法会并存呢？何为响应式依赖（实例被创建时就存在的属性为响应式的）？

计算属性可以依据响应式依赖进行缓存，如上面代码所示，计算属性vmMessage依赖的是vmReverse。。所以只有当vmReverse发生改变时，该计算属性才会进行计算，否则，会直接利用缓存数据。计算属性对于需要进行大型的运算来说是值得的，但是如果不希望数据进行缓存，那么久可以选择方法。。。。

计算属性 VS 监听属性，一下代码是直接从官网复制的，因为vue是我接触的第一个框架，所以我暂时不是很理解监听属性的处理方法为什么要那样的麻烦？而不能像计算属性那样简单。

监听属性方法：

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
}
}
})

利用计算属性：

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

谈谈计算属性中的getter和setter方法。

vue的setter和getter分别表示取值和设置值，默认只有getter，如果需要，可以自行设置setter.

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 也会相应地被更新。

既然这样，那为什么还需要使用侦听器（watch）呢？

    watch可以自定义一个侦听器。而且可以结合ajax实现异步操作。

关于vue对class和style的绑定

v-bind:class="{}"

当在一个自定义组件上使用class时，，如果之后在使用时再添加一些class时，最开始的类不会被覆盖

Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
<my-component class="baz boo"></my-component>
<p class="foo bar boo">Hi</p>

绑定内联样式

v-bind:style=“{}” //注意，这是一个javascript对象。css属性名可以用驼峰式或短横线分隔(kebab-case)，短横线的话记得要用单引号括起来

<div v-bind:style="styleObject"></div>

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

样式绑定的数组语法

v-bind:style="[]"

vue style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值。。

南北北南

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单谈谈vue的属性。。。

谈谈vue的属性data。。。。只有当实例被创建时存在的属性才是响应式的，、当这些属性的值发生改变，视图也将会产生响应。。如果有的属性你将来会用到，但现在还不知道值，可以设置一些初始值data { todo: '', lis: true, a1: 34, arr: [], error: null }但要注意下面的方法，会阻止修改现
复制链接

扫一扫