初识——Vue基础指令

Vue基础

Vue是基于M(数据)V(视图)VM(调度者)这种设计模式开发出来的一个框架

MVC和MVVM之间的区别: MVC是单向通信 MVVM是双向数据绑定

Vue基本的编码步骤

1. 引入Vue.js框架

<script src='./src/vue.js'></script>

2. 在script标签部分创建一个Vue实例

var vm = new Vue({
    el:'#app', // 通过选择器找到一个让vm实例监管的区域
    data:{
        // 在data中定义的数据就是整个Vue实例可以用到的数据
        msg:'hello'
    }
})

3. 在HTML结构部分书写Vue代码

<div id = 'app'>
    {{msg}}
</div>

Vue指令

• {{}}:插值表达式,用于显示data中定义的数据

• v-text:用于显示data中定义的普通文本数据

new Vue({
    el:'#app',
    data:{
        msg:'普通文本数据'
    }
})
<p v-text = 'msg'></p>

• v-html:用于显示data中定义的富文本数据(带有HTML标签的文本)

new Vue({
    el:'#app',
    data:{
        msg:'<p>富文本数据<p/>'
    }
})

<div v-html = 'msg'></div>

• v-bind:动态的给元素绑定属性

new Vue({
    el:'#app',
    data:{
        url:'http://www.baidu.com/'
    }
})

<a v-bind:href = 'url'>百度</a>

• v-for:用于循环渲染元素进行显示

<div v-for = '(item,index) in list' :key = 'index'>
    <!-- 数组中的每一项 -->
    {{item}} 
    <!--  当前项的索引 -->
    {{index}}
</div>

• v-model:用于对表单元素实现双向数据绑定,即模型中数据发生变化可以直接更新视图,视图中数据发生变化也可以影响到模型

<!-- v-model 指令只能用于表单元素和组件 常见于input/textarea/select标签上 -->
<input v-model = 'name'></input>

• v-on:绑定事件

<button v-on:click = 'clickHandle'></button>

new Vue({
    el:'#app',
    // methods中专门用来定义方法
    methods:{
        clickHandle:function(){
            console.log('点击事件被触发了')
        }
    }
})

• v-if:控制元素的显示隐藏

通过添加和移除元素控制元素显示隐藏

如果元素初始状态是隐藏的,而且不涉及频繁显示隐藏切换,推荐使用v-if

<div v-if = 'isshow'></div>

new Vue({
    el:'#app',
    data:{
        isshow:true
    }
})

• v-show:控制元素的显示隐藏

通过给元素设置display:none的样式控制元素显示隐藏

如果元素涉及频繁显示隐藏切换,推荐使用v-show,性能会比v-if好

<div v-show = 'isshow'></div>

new Vue({
    el:'#app',
    data:{
        isshow:true
    }
})

使用样式

使用class样式

1. 数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

2. 数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

4. 直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

2. 将样式对象，定义到 data 中，并直接引用到 :style 中

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 :style 中通过数组，引用多个 data 上的样式对象

• 在data上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

ref获取DOM

通过给元素设置ref属性,然后使用this.$refs.属性值得方式可以获取到DOM

<div ref = 'dv'></div>
<button @click = 'getdv'>获取div元素</button>

new Vue({
    el:'#app',
    methods:{
        getdv(){
            console.log(this.$refs.dv)
        }
    }
})

自定义指令

指令能够帮助开发者操作DOM,当系统指令不能够满足需求时,就可以使用自定义指令进行DOM操作;将操作DOM的方式封装成指令后首先可以重复使用,其次封装成指令的过程是vue内部提供的方法,这些方法在性能上比直接操作DOM元素要高。

Vue.directive('mycolor',{
    // 指令的钩子函数
    inserted(el,binding){
        // el 是指令所在的元素对象
        // bingding是一个对象
        // binding.value // red 指令等号后面表达式的值 也就是变量的值
        // binding.expression // 指令等号后面的表达式  本质就是一个变量
    }
})

new Vue({
    el:'#app',
    data:{
        color:'red'
    }
})

<div v-mycolor = "color"></div>

自定义过滤器

在数据展示之前,对原始数据进行处理并返回处理后的数据进行展示,不改变原始数据

过滤器只能用在插值表达式和属性绑定(v-bind)中

Vue.filter('过滤器名称',function(data,arg){
    // data是原始数据,即管道符前面的数据
    // arg 是使用过滤器时传递的参数
    // 1. 对原始数据进行逻辑处理
    // 2. 处理完成后进行return
    return `处理完的数据`
})

<div>{{原始数据 | 过滤器名称(参数)}}</div>

计算属性computed

用于定义一种可以随着所依赖数据发生变化的属性

new Vue({
    el:'#app',
    // data中定义普通属性
    data:{
        msg:''
    },
    // compluted中定义的函数名就是计算属性 属性的值是该函数的返回值
    // 计算属性的值会随着依赖数据的变化而变化
    // 例如this.msg被修改 则comMsg的值也会重新计算
    compluted:{
        comMsg(){
            return this.msg
        }
    }
})

监听器 watch

监听data中定义的数据的变化

new Vue({
    el:'#app',
    data:{
        msg:'被监听数据',
        obj:{
            name:'zxx'
        }
    },
    watch:{
        msg(newVal,oldVal){
            // 根据数据变化做相关逻辑处理
            // newVal 变化后的值
            // oldVal 变化前的值
        },
        // 当被监听的数据是复杂数据类型时,一般需要用深度监听才可以监听到复杂数据类型内部的数据变化
        obj:{
            handler(newVal,oldVal){
                
            },
            deep:true
        }
    }
})