Vue学习笔记1--基本使用

时间：2020-05-04 10:19:29 阅读：52 评论：0 收藏：0 [点我收藏+]

MVVM设计思想

M（model）
V（view）
VM（View-Model）

V M交互通过VM（DOM 监听数据绑定）

vue基本使用

helloworld入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 支持简单的表达式计算字符串拼接等 -->
        <div>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div>{{ msg + ‘后面可以拼接字符串哦‘}}</div>
    </div>
    <script>
        var vm = new Vue({
            /* 挂载位置 */
            el: ‘#app‘,
            /* 模型数据 */
            data: {
                msg : ‘hello world!!‘
            }
        });
    </script>
</body>
</html>

运行原理

编译：vue语法->原生语法

模板语法

概览

插值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

插值表达式

<!-- 插值表达式 支持简单的表达式计算字符串拼接等 -->
        <div>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div>{{ msg + ‘后面可以拼接字符串哦‘}}</div>

指令

本质：自定义属性
格式：v-开始（v-cloak）

指令文档

指令1： v-cloak

解决单纯使用插值表达式时刷新出现闪动问题（先显示{{}} 然后才被替换为数据）

使用方式：

提供样式

<style>
    [v-cloak]{
        display: none;
    }
</style>

添加指令
```
<div v-cloak>{{msg}}</div>
```

原理

通过样式代码隐藏，内存替换完毕后再进行显示

指令2：v-text

数据绑定，无闪动问题（推荐）

<div v-text="msg"></div>

指令3：v-html

填充html片段

<div v-html="msg"></div>
<!--msg : "<h1>hello world!!</h1>"-->

指令3：v-pre

显示原始信息，不进行编译

<div v-pre>{{msg}}</div>
<!-- 页面显示{{msg}} -->

指令4：v-once

只编译一次，数据发生更新时不进行页面更新

<div v-once>{{msg}}</div>

使用场景：显示的信息后续不需要再进行修改，可以提高性能

指令5：v-model

双向数据绑定

<div>{{msg}}</div>
<div>
    <input v-model="msg" type="text">
</div>

指令6：v-on

html

<div id="app">
        <!-- 插值表达式 -->
        <div>{{num}}</div>
        <div>
            <input type="button" v-on:click="num++" value="+">
            <!-- 简写 -->
            <input type="button" @click="num--" value="-">
            <!-- 调用方法 1 默认携带$event事件对象（第一次参数）-->
            <input type="button" @click="add" value="+">
            <!-- 调用方法 2 不携带事件对象 必须最后一个对象显示传递名称必须$event-->
            <input type="button" @click="add()" value="+">
            

        </div>
    </div>

<script>
    var vm = new Vue({
        /* 挂载位置 */
        el: ‘#app‘,
        /* 模型数据 */
        data: {
            num: 0
        },
        methods: {
            add: function(){
                /* this == vm */
                this.num++;
            }

        },
    });
</script>

事件修饰符

.stop 阻止冒泡：阻止点击事件传递到父元素进而触发父元素的点击事件

<input type="button" v-on:click.stop="num++" value="+">

.prevent 阻止默认行为：阻止a标签跳转

<a v-on:click.prevent="add" href="https://www.baidu.com">+</a>

其他

.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat(‘hello‘, $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

按键修饰符

<form>
    <div>
        <!-- 按删除键删除用户名 -->
        <input type="text" v-model="username" v-on:keyup.delete="clear">
    </div>
    <div>
        <!-- 按回车直接提交 -->
        <input type="password" v-on:keyup.enter="submit" v-model="password">
    </div>
    <div>
        <input type="submit" @click="submit" value="登录">
    </div>
</form>

指令7：v-bind

属性绑定

<a v-bind:href="url">百度</a>
<!--url: ‘http://www.baidu.com‘-->

缩写

<a :href="url">百度</a>

绑定class影响样式

 <!-- active类名  isActive控制是否显示标志  -->
 <div :class="{active : isActive}"></div>
 <div :class="[active,err]"></div>
 <div :class="[{active : isActive},err]"></div>

分支指令

使用与angular类似

v-if
v-else
v-else-if
v-show

v-if 与 v-show区别

v-if：元素是否渲染
v-show：元素是否显示（已经渲染）

循环指令v-for

遍历数组

<ul>
	<li v-for="(item, index) in fruits" :key="index" v-text="item +‘----‘+ index"></li>
</ul>

遍历对象（value，key，index）顺序固定

<div v-for="(f, key,index) in fruit">{{f + ‘----‘ +key + ‘----‘ + index}}</div>

v-if 和 v-for结合

<li v-if="item==‘apple‘"v-for="(item, index) in fruits" :key="index" v-text="item +‘----‘+ index"></li>

常用特性

概览

表单操作
自定义指令
计算属性
过滤器
侦听器
生命周期

表单操作

自定义指令

计算属性

抽取复杂的计算逻辑

与方法的区别：

计算属性基于他们的依赖进行缓存的（多次访问只会调用一次）
计算属性依赖于data中的数据，数据变化时被调用时会重新计算
方法不存在缓存

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: ‘#example‘,
  data: {
    message: ‘Hello‘
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split(‘‘).reverse().join(‘‘)
    }
  }
})

计算属性

过滤器

侦听器

监听器

生命周期

mounted：页面渲染完毕，此时调用后台接口

生命周期

Vue学习笔记1--基本使用

MVVM设计思想

vue基本使用

helloworld入门

运行原理

模板语法

概览

插值表达式

指令

指令1： v-cloak

指令2：v-text

指令3：v-html

指令3：v-pre

指令4：v-once

指令5：v-model

指令6：v-on

指令7：v-bind

分支指令

循环指令v-for

常用特性

概览

表单操作

自定义指令

计算属性

过滤器

侦听器

生命周期

推荐官方文档内容最全