vue基础知识一(指令)

技术先锋bobo
656 阅读9分钟

个人博客

插件准备

浏览器插件

  • vue devtools（请到墙外下载）

VS Code插件

自动补全标签

  • Auto Close Tag
  • Auto Complete Tag
  • Auto Rename Tag

开启一个服务器浏览HTML网页，第一次使用需要Ctrl + Shift + p输入 live server选择open

  • Live Server

路径自动补全

  • Path Intellisense

vue语法高亮和自动补全代码

  • Vetur
    • VueHelper

玩转Vs code

文件--->首选项--->设置，然后添加如下代码：

  "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
  },
  "emmet.includeLanguages": {
      "vue-html": "html",
      "vue": "html"
  }

简单介绍

为什么学习Vue

为什么学习vue

什么是MVVM

- M => Model(数据模型)
- V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)
- VM => ViewModel(一个同步View和Model的对象)

MVVM

Vue初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 引入vue文件 -->
  <script src="./vue2.js"></script>
</head>
<body>
  <!-- 如果超过vue实例的管辖范围，这个{{}}作用就会失效 -->
  <div>{{msg}}</div>
  <div id="app">
    <!-- 5. 展示数据：通过插值表达式{{}} ，作用是专门用来渲染文本-->
    <h1>{{msg}}</h1>
  </div>
  <script>
    // 2. 创建vue实例，作用：他会监管我们的html代码
    var vm = new Vue({
      // 3. 通过一个el属性来指定vue实例的监管范围,后面跟一个id
      el: '#app',
      // 4. 用data属性将要展示的变量存起来,data后面跟一个对象
      data: {
        msg: 'hello world'
      }
    })
  </script>
</body>
</html>

Vue常用系统指令

插值表达式

` `` html 数据绑定最常见的形式，其中最常见的是使用插值表达式，写法是{{}} 中写表达式 例如：Message: {{ msg }} Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。 无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

{{}}对JavaScript 表达式支持，例如：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

但是有个限制就是，每个绑定都只能包含单个表达式，如下表达式无效：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 这也是语句，不是表达式 -->
{{ number++ }} 会报警告：vue2.js:482 [Vue warn]: You may have an infinite update loop in a component render function.

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}


### v-text

```html
<!-- v-text可以将一段文本渲染到指定的元素中,例如： -->
<div v-text="msg"></div>
new Vue({
    data:{
        msg:'hello world'
    }
});

<!-- 输出结果：-->
<div>hello world</div>

v-html

差值表达式和v-text会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令,被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}}

示例：

<div v-html="rawHtml"></div>
    new Vue({
        data:{
            rawHtml:'<h1>hello world</h1>'
        }
})

v-bind

作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class

示例：


 	1、img的src从imageSrc变量中取得
        <img v-bind:src="imageSrc" >

        2、从classA, classB两个变量的值作为class的值，
        结果是：<div class="A B">classA, classB</div>        
        <div v-bind:class="[classA, classB]">classA, classB</div>

        3、isRed变量如果为true，则class的值为red，否则没有
        <div v-bind:class="{ red: isRed }">isred</div>

        4、div的class属性值一定有classA变量的值，而是否有classB和classC变量的值取决于isB和isC是否为true，二者一一对应
        <div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>

        5、变量加常量
        <div v-bind:style="{ fontSize: size + 'px' }">size22</div>

        6、变量加常量的另一种写法
        <img v-bind="{src:imageSrc+'?v=1.0'}" >

        7、对象数组
        <div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>

3、缩写形式
    <img :src="imageSrc">
    <div :class="[classA, classB]">classA, classB</div>
    <div v-bind:class="{ red: isRed }">isred</div>
    <div v-bind:class="[classA, { classB: isB, classC: isC }]">数组对象</div>
    <div v-bind:style="{ fontSize: size + 'px' }">size22</div>
    <img v-bind="{src:imageSrc+'?v=1.0'}" >
    <div v-bind:style="[styleObjectA, styleObjectB]">styleObjectA, styleObjectB</div>


  vue对象初始化
  <script>
    // 实例化vue对象（MVVM中的View Model）
    new Vue({
        // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
        el:'#app',
        data:{
        // 数据 （MVVM中的Model）   
        imageSrc:'http://157.122.54.189:8998/vue/vuebase/chapter1/imgs/d1-11.png',
        isRed:true,
        classA:'A',
        classB:'B',
        isB:true,
        isC:true,
        size:22,
        styleObjectA:{color:'red'},
        styleObjectB:{fontSize:'30px'}
        },
        methods:{

        }
    })
</script>

v-for

<!-- 
  v-for用法：
    item in Array
    (item, index) in Array
    value in Object
    (value, key, index) in Object

  :key属性具有唯一性，不能重复，它能够唯一标识数组的每一项
  将来数据中的某一项的值发生了改变，则v-for只会更新当前项对应的这个dom元素的值，而不是更新整个数据，从而提高效率，参考https://www.zhihu.com/question/61064119/answer/183717717

  注意：以下变动不会触发视图更新
    1. 通过索引给数组设置新值
    2. 通过length改变数组
  解决：
    1. Vue.set(arr, index, newValue)
    2. arr.splice(index, 1, newValue)
  -->
  <ul>
    <li v-for="item in user">{{item.name}}</li>
    <li v-for="(item, index) in user" :key="index">{{index}}.{{item.name}}</li>
    <li>---------------华丽的分割线---------------</li>
    <li v-for="value in boss">{{value}}</li>
    <li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>
  </ul>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      user: [
        {name: 'jack'},
        {name: 'neil'},
        {name: 'rose'}
      ],
      boss: {
        name: '马云',
        age: 50,
        money: 1000000002030
      }
    }
  })
  </script>

v-model

1、在表单控件或者组件上创建双向绑定
2、v-model仅能在如下元素中使用：
  input
  select
  textarea
  components（Vue中的组件）

3、举例：
  <input type="text" v-model="uname" />

new Vue({
    data:{
        uname:'' //这个属性值和input元素的值相互一一对应，二者任何一个的改变都会联动的改变对方
      }
})

v-on

1、作用：绑定事件监听，表达式可以是一个方法的名字或一个内联语句， 如果没有修饰符也可以省略，用在普通的html元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

2、常用事件：

  • v-on:click

  • v-on:keydown

  • v-on:keyup

  • v-on:mousedown

  • v-on:mouseover

  • v-on:submit ....

示例：


    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>

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

   5、v-on的缩写形式：可以使用@替代 v-on:
    <button @click="doThis"></button>

6、按键修饰符

触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件

写法：
  <input type="text" @keydown.enter="kd1">  当按下回车键时才触发kd1事件

  由于回车键对应的keyCode是13，也可以使用如下替代
  <input type="text" @keydown.13="kd1">  当按下回车键时才触发kd1事件

  但是如果需要按下字母a（对应的keyCode=65）才触发kd1事件，有两种写法：
  1、由于默认不支持a这个按键修饰符，需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为：

  Vue.config.keyCodes.a = 65
  <input type="text" @keydown.a="kd1">  这样即可触发

  2、也可以之间加上a对应的数字65作为按键修饰符
  <input type="text" @keydown.65="kd1">  这样即可触发

  键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字


### v-on按键修饰符

*   作用说明

```html
  文档地址：https://cn.vuejs.org/v2/guide/events.html#键值修饰符

  在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
  .enter
  .tab
  .delete (捕获 “删除” 和 “退格” 键)
  .esc
  .space
  .up
  .down
  .left
  .right
  • 可以自定义按键别名
  // 在Vue2.0版本中扩展一个f1的按键修饰符写法：
  Vue.config.keyCodes.f1 = 112

  // 使用
  <button @keyup.f1="someFunc"></button>

v-if

作用：根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的），为true则渲染。在切换时元素及它的数据绑定被销毁并重建

示例：


  <!-- Handlebars 模板 -->
  {{#if isShow}}
    <h1>Yes</h1>
  {{/if}}

  通常我们使用这种写法居多：
  <h1 v-if="isShow">Yes</h1>

  也可以用 v-else 添加一个 “else” 块：
  <h1 v-if="isShow">Yes</h1>
  <h1 v-else>No</h1>
<!--注意：v-else 元素必须紧跟在 v-if 元素否则它不能被识别。 -->
  new Vue({
      data:{
        isShow:true
      }
  });

v-show

根据表达式的真假值，切换元素的 display CSS 属性，如果为false，则在元素上添加 display:none来隐藏元素，否则移除display:none实现显示元素

示例：


    <h1 v-show="isShow">Yes</h1>

    new Vue({
        data:{
          isShow:true
            }
    });

v-if和v-show的总结：

v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中，而v-show 是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

v-cloak

v-cloak指令保持在元素上直到关联实例结束编译后自动移除，v-cloak和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 通常用来防止{{}}表达式闪烁问题

示例：


<style>
  /*属性选择器*/
[v-cloak] { display: none }
</style>

<!-- 在span上加上 v-cloak和css样式控制以后，浏览器在加载的时候会先把span隐藏起来，直到 Vue实例化完毕以后，才会将v-cloak从span上移除，那么css就会失去作用而将span中的内容呈现给用户 -->
<span v-cloak>{{msg}}</span>    

new Vue({
    data:{
        msg:'hello ivan'
      }
})
avatar
文章
阅读
粉丝