vue

创建vue实例的时候，传入一个对象options

el:string/htmlelement 作用：决定之后vue实例会管理哪个DOM
data:object/function 作用：vue实例对应的数据对象（组件里面必须是函数）
methods:{[key:string]:function} 作用：定义一些属于vue的方法，可以在其他地方调用，也可以在指令中使用

vue基本操作

插值操作(就是把data里面的文本数据插入到html中)

静态插入

Mustache语法(双括号语法)
不仅仅可以直接写变量，也可以写简单的表达式仅仅作用于元素内容(content)
v-once指令，表示元素和组件只会渲染一次，不会响应式改变，后边不用跟其他指令
v-html指令，就是会将HTML代码进行格式解析，并且显示对应内容

<h2 v-html="url"></h2>//html部分
url: "<a href='http://www.baidu.com'>百度一下</a>"// data部分

v-text指令，作用和mustache语法差不多，但是没有mustache灵活，具体使用方法和v-html差不多(不建议使用)
v-pre指令，跳过这个元素和子元素的编译过程，直接显示原本的mustache语法
v-cloak指令，为了避免浏览器渲染的时候直接显示没有编译过的mustache语法，加上这个属性，可以在样式中直接选中拥有这个属性的元素，设置他们的display：none，然后在vue渲染了之后，v-cloak属性会直接被删掉

[v-cloak] {
    
    
    display: none;
}

动态插入(v-bind)

v-bind，可以动态绑定属性，具体使用方法如下所示

<img v-bind:src="imgurl" alt="">//html部分
<img :src="imgurl" alt="">//语法糖    就是用:来代替v-bind:
imgurl:"https://cn.vuejs.org/images/logo.svg"//data部分

v-bind 动态绑定class

对象语法

<h2 v-bind:class="{active:isActive, line:isLine}">哈哈哈</h2>

class里面用v-bind指令的时候，可以放一个对象，对象内容是键值对，属性名后面跟布尔值，来判断这个属性生不生效,放对象目前只有在v-bind的时候才会使用
下面是个小案例，点击一次让字变红，点两次让字变绿，没点的时候字是黑色的

<div id="app">
    <h2 v-bind:class="{active:isActive, line:isLine}">哈哈哈</h2>
    <button v-on:click="btnClick">按钮</button>
</div>
<script src="vue.js"></script>
<script>
    let count = 0;
    const app = new Vue({
      
      
        el: "#app",
        data: {
      
      
            isActive: false,
            isLine: false
        },
        methods: {
      
      
            btnClick: function () {
      
      
                count ++;
                if (count%2!=0) {
      
      
                    this.isLine = false;
                    this.isActive = true;
                }else{
      
      
                    this.isActive = false;
                    this.isLine = true;
                }
            }
        }
    })
</script>

css部分

.active{
    
    
    color: brown;
}
.line{
    
    
    color: cadetblue;
}

在使用v-bind的时候的class可以和普通class合并(vue内部语法) 和普通的类不起冲突

<h2 v-bind:class="{active:isActive, line:isLine}" class="li">哈哈哈</h2>

在这里插入图片描述

如果class里面的属性过于复杂，可以放在methods或者computed里面

<h2 v-bind:class="getClasses()" class="li">哈哈哈</h2>
getClasses:function () {
    
    
                return {
    
    active:this.isActive, line:this.isLine}
            }

数组语法

<h2 :class="['active', 'line']" class="li">哈哈哈</h2>
<!-- 上述就是数组语法，和对象语法一样可以和普通的类合并，如果传入形式和上面一样的话，其实和普通的类没有区别，因为都是不可更改的 -->
<h2 :class="[active, line]" class="li">哈哈哈</h2>
<!-- 这样就可以动态更改类，数组方法并不常用，这样的active和line其实就是变量名，在data里面取出变量 -->

在这里插入图片描述

如果属性太复杂，也可以和对象语法一样，在methods里面封装函数来返回数组，记得在变量名前面加上this.

v-bind 动态绑定style

这个和上一个一样，同样有对象法和数组法

对象语法

<h2 :style="{key(属性名): value(属性值)}">{
   
   {message}}</h2>

属性值如果不加单引号，就会被默认是变量名，所以想直接改变的时候，记得给属性值加上单引号

数组语法
就是数组类型，里面参数放置变量名，具体的变量值是由data里面的数据决定的

计算属性

在使用mustache语法的时候，如果拼接的过于长的时候，就会显得特别累赘，此时可以用methods里面，添加一个方法来解决问题

当然也有一个计算属性，computed来计算相应的属性格式，在使用 mustache语法的时候，使用函数调用使用的时候其实并不是以函数的形式使用，而是以属性来直接使用

<h2>{
   
   {full}}</h2>//html部分
computed:{//js部分
    full: function () {
        return this.active + " " +this.line
    }
}

计算属性一般只有get属性，没有set属性，所以也就是只读属性

为什么不加上小括号就是因为相当于是直接调用get方法

这里就是对象的访问器属性

计算属性和methods的区别
就是在调用方法的时候，计算属性只要里面内容没有改变，那么里面的函数只会执行一次，但是methods里面的函数则是调用几次就执行几次。
所以一般在同时可以使用计算属性和methods的时候，会建议使用计算属性来优化性能。
只有在内部内容发生改变的时候，计算属性才会重新执行
为什么计算属性在里面内容没有改变的情况下只会执行一次呢？
这是因为计算属性会进行缓存，如果多次使用，计算属性只会调用一次

在es6之前的js中只有全局作用域和函数作用域，所以才会有闭包之类的问题

事件监听(v-on)

可以绑定函数，也可以绑定对象(用的很少)，也可以直接写具体的操作步骤

@click==v-on:click

@就是v-on的语法糖

事件调用时，没有参数，可以省略小括号
有参数，有小括号，但是没有传入参数，那么形参就是undefined
如果有参数，没有小括号(当然也不会传入参数)，那么参数就是点击的事件对象
如果有参数，还想获得事件对象，vue有固定格式，就是 $e v e n t ，就是在参数变量前面加上$ 符号

v-on的修饰符

<button @click.stop="increment">+</button>

.stop修饰符阻止冒泡
.prevent阻止默认事件
.keyCode监听键盘上某个键的事件
例如：.enter监听回车键键的事件
.native监听组件根元素的原生事件
.once只触发一次回调

条件判断

v-if，后面是布尔值来决定要不要被渲染出来里面的元素
v-else，没有参数，只要v-if是false的时候，就显示v-else的内容
如果有多对是就近原则，一一匹配，如果else多于if，那么多于的else就一直不显示
v-else-if，参数就是一个判断，满足条件显示，不满足就换下一个
就和else if一样，逻辑判断复杂建议使用methods封装方法，直接返回内容，不建议在hmtl中使用这样的复杂逻辑判断

vue的基本操作 -- 大二上第十一周十二周

目录

vue