简单谈谈vue的属性。。。

谈谈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绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值。。

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页