简单易懂的 Vue.js 基础知识 ！

Posted 2021-02-06 My-T

根 vue 实例

let viewModel = new Vue({
    // 包含数据、模板、挂载元素、方法、生命周期钩子等选项
})

Hello Wrold 

<!-- 这是我们的 View -->
<div id="app">
  Hello {{ name }}!
</div>
// 这是我们的 Model
var model = {
  name: \'Vue.js\'
}

// 创建一个 Vue 实例或 "viewModel"
// 它连接 View 与 Model
var viewModel = new Vue({
  el: \'#app\',
  data: model
})

生命周期

 

上图的就是ViewModel的生命周期，仔细的看其实并不难。目前先了解一下。

 

流程大致像这样

created()->beforeCompile()->compiled()->ready()->attached()->detached()->beforeDestroy()->destroyed()   

更详细的介绍，请点这里查看API文档

绑定

简单的理解就是模板字符串功能，放心的在任何你想用的地方去用，假如错了vue会给你提示。

定界符都是可以修改的

// 模板定界符
Vue.config.delimiters = [\'{{\', \'}}\']

// html模板定界符
Vue.config.unsafeDelimiters = ["{{{", "}}}"]

数据的绑定

<span>消息: {{ msg }}</span>   <!-- 同步更新js里面的数据 -->

<span>他将永不会改变: {{* msg }}</span>   <!-- 第一次插入之后就不更新了 -->

<div>{{{ raw_html }}}</div>  <!-- 插入原生的 html -->

<div id="item-{{ id }}"></div>  <!-- 放在id中 -->

表达的绑定

不可使用，var/let关键字声明变量，也不能使用if/for流程控制。

{{ number + 1 }}   // 做简单的运算

{{ ok ? \'YES\' : \'NO\' }}   // 三元表达式

{{ message.split(\'\').reverse().join(\'\') }}   // 调用该对象上的方法 

指令

当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

<p v-if="ok">Hello!</p> <!-- 根据if里面的值，确定是否编译 -->

<a v-bind:href="url"></a>  
<!-- 等于href="{{url}}" 这里 href 是参数，将元素的 href 属性传进去。
     告诉vue元素的 href 特性跟表达式 url 的值绑定 -->


<a v-on:click="doSomething"> 
<!-- v-on表示监听，传入了click参数，表示当click事件发生的时候，执行doSomething函数 -->


<a v-bind:href.literal="/a/b/c"></a>
<!-- .literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式 -->

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

过滤器

过滤器提供了一种执行文本转换的方法，比如说都转成大写字母或者几乎做任何我们想做的事情。过滤器既可以在文本插值中使用，也可以在v-bind指令的表达式中使用。

使用Vue,可以有两种不同的方式注册过滤器：全局和本地过滤器。

全局过滤器

来看一个简单的示例。下面这个示例演示的是注册一个全局过滤器，其作用就是在价格前面加上美元符号：

// 声明一个全局的过滤器
Vue.filter(\'toUSD\', function (value) {
    return `$${value}`
})

// 在模板中这样使用 文本插值的使用方式
<div id="app">
    <h1>{{ price | toUSD}}</h1>
</div>

特别声明： 过滤器定义必须始终位于Vue实例之上，否则你将会得到一个“Failed to resolve filter: toUSD”的错误信息。

本过过滤器

本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写：

let app = new Vue({
    el: \'#app\',
    data () {
        return {
            name: \'hello world !\'

        }
    },
    // 声明一个本地的过滤器
    filters: {
        Upper: function (value) {
            return value.toUpperCase()
        }
    }
})

<div id="app">
    <h1>{{ name | Upper }}</h1>
</div>

正如上例中看到的，本地过滤器存储在Vue组件中，作过filters属性中的函数。这个时候你想注册多少个就能注册多少个：

let app = new Vue({
    el: \'#app\',
    data () {
        return {
            name: \'hello world !\'
        }
    },
    // 声明一个本地的过滤器
    filters: {
        Upper: function (value) {
            return value.toUpperCase()
        },
        Lower: function (value) {
            return value.toLowerCase()
        }
    }
})

 

计算属性

<div id="example">
  a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
  el: \'#example\',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})

给计算属性设置setter

computed: {
    fullname: {
        get: function() {
            return this.firstName + \' \' + this.lastName
        },
        set: function() {
            let names = newValue.split(\' \')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

Class 与 Style 绑定

vue特意增强了他们，支持对象和数组绑定

Class 对象绑定

<div class="static" :class="{ \'class-a\': isA , \'class-b\': isB}"></div>

data: {
    isA: true,
    isB: false
}

<div class="static" :class="classObjcet"></div>

data: {
    classObject: {
        \'class-a\': true
        \'class-b\': false
    }
}


//渲染之后

<div class="static class-a"></div>

Class 数组语法

<div :class="[classA,classB]"></div>

data: {
    classA: \'class-a\'
    classB: \'class-b\'
}

// 渲染为

<div class="class-a class-b"></div>


<div :class="[classA, isB? classB : \'\']"></div>

// 始终添加classA对应的类名，根据isB的值确认是否添加classB对应的值。

// 在1.0.19+之后，为了更明了的写法，支持数组里面嵌套对象语法

<div :class="[classA, {classB: isB, classC: isC}]"></div>

Style 对象语法

CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）,自动添加浏览器的前缀。

<div :style="{color: activeColor, fontSize: fontSize + \'px\' }"></div>

data: { 
    activeColor: \'red\',
    fontSize: 30
}

<div :style="styleObject"></div>

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

Style 数组语法

<div :style="[styleObjectA,styleObjectB]"></div>

data = {
    styleObjectA: {
        fontSize: \'15px\'
    }
}

条件渲染

特别说明: v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

v-if

<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

不支持 template 元素包裹

<h1 v-show="ok">Hello!</h1>

// 在组件上不能使用 v-else
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>

if 与 show 之间的战争

如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

列表渲染

<ul id="list">
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>


var vm = new Vue({
    el: \'#list\',
    data: {
        items: [
            { message: \'Foo\' },
            { message: \'Bar\'}
        ]
    }
}) 

通过$index可以访问索引，且在v-for块内可以访问的到其他属性。

<ul id="list">
    <li v-for="item in items">
        {{ parentMessage }} - {{ $index }} - {{ item.message }}
    </li>
</ul>


var vm = new Vue({
    el: \'#list\',
    data: {
        parentMessage: \'Parent\',
        items: [
            {message: \'Foo\'},
            {message: \'Bar\'}
        ]
    }
})

为索引设置一个别名，且 1.0.17+ 之后可以使用 for of

<div v-for="(key,value) of items">
</div>


// 使用一层 template 包裹
<template v-for="item in items">
    <span>{{ item.id }}</span>
    <span>{{ item.content }}</span>
</template>

对象v-for

<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ $key }} : {{ value }}
    </li>
</ul>


<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

方法与事件处理

<div id="example">
    <button @click="greet">Greet</button>
</div>

let vm = new Vue({
    el: \'#example\',
    data: {
        name: \'Vue.js\'
    },
    methods: {
        greet: function(event) {
            alert(\'hello\'+this.name+\'!\')
            console.log(event.target.tagName)
        }
    }

})

<div id="example">
    <button :click="say(\'hi\')">Say Hi</button>
    <button :click="say(\'what\')">Say What</button>
</div>


new Vue({
    el: \'#example\',
    methods: {
        say:  function(msg) {
            alert(msg)
        }
    }
})

事件修饰符

在事件处理器中经常需要调用event.preventDefault 或 event.stopPropagation

// 阻止单击事件冒泡
<a @click.stop="do"></a>

// 提交事件不再重载页面
<a @submit.prevent="submit"></a>

// 修饰符可以串联
<a @click.stop.prevent="do"></a>

// 只有修饰符
<form @submit.prevent></form>

按键修饰符

• enter
• tab
• delete
• esc
• space
• up
• down
• left
• right

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

自定义按键别名

// 可以使用 @keyup.f1

Vue.directive(\'on\').keyCodes.f1 = 112