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

╰半橙微兮° 2022-01-06 13:41 246阅读 0赞

# 根 vue 实例 #

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

**Hello Wrold **

<div id="app">
      Hello {
          { name }}!
    </div>
    // 这是我们的 Model
    var model = {
      name: 'Vue.js'
    }
    
    // 创建一个 Vue 实例或 "viewModel"
    // 它连接 View 与 Model
    var viewModel = new Vue({
      el: '#app',
      data: model
    })

# 生命周期 #

![Image 1][]

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

**流程大致像这样**

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

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

# 绑定 #

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

**定界符**都是可以修改的

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

## 数据的绑定 ##

<span>消息: {
          { msg }}</span>   
    
    <span>他将永不会改变: {
          {* msg }}</span>   
    
    <div>{
          {
          { raw_html }}}</div>  
    
    <div id="item-{
          { id }}"></div>

## 表达的绑定 ##

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

{
          { number + 1 }}   // 做简单的运算
    
    {
          { ok ? 'YES' : 'NO' }}   // 三元表达式
    
    {
          { message.split('').reverse().join('') }}   // 调用该对象上的方法

## 指令 ##

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

<p v-if="ok">Hello!</p> 
    
    <a v-bind:href="url"></a>  
    
    
    
    <a v-on:click="doSomething"> 
    
    
    
    <a v-bind:href.literal="/a/b/c"></a>

### v-bind 缩写 ###

<a v-bind:href="url"></a>
    
    
    <a :href="url"></a>
    
    <a v-on:click="doSomething"></a>
    
    
    <a @click="doSomething"></a>

# 过滤器 #

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

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

### 全局过滤器 ###

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

// 声明一个全局的过滤器
    Vue.filter('toUSD', function (value) {
        return `$${value}`
    })
    
    // 在模板中这样使用 文本插值的使用方式
    <div id="app">
        <h1>{
          { price | toUSD}}</h1>
    </div>

### ![1581329-20190127151445862-1280451279.png][] ###

特别声明： 过滤器定义必须始终位于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>

![1581329-20190127151027487-842647852.png][]

正如上例中看到的，本地过滤器存储在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

<input v-on:keyup.13="submit">
    
    
    <input v-on:keyup.enter="submit">
    
    
    <input @keyup.enter="submit">

**自定义按键别名**

// 可以使用 @keyup.f1
    
    Vue.directive('on').keyCodes.f1 = 112

转载于:https://www.cnblogs.com/Mr-Tao/p/10326305.html

[Image 1]: 
[v-bind]: https://www.w3cplus.com/vue/v-bind.html
[1581329-20190127151445862-1280451279.png]: /images/20211227/9633eb1e9e8449069bcefeb58d9eb25c.png
[1581329-20190127151027487-842647852.png]: /images/20211227/6a350193d6134c74b6f23184d7712bee.png