逆战——vue篇（一）

最新推荐文章于 2020-03-02 20:16:09 发布

m0_46152845

最新推荐文章于 2020-03-02 20:16:09 发布

阅读量147

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/m0_46152845/article/details/104487848

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述
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常用系统指令

1.插值表达式

数据绑定最常见的形式，其中最常见的是使用插值表达式，写法是{{}} 中写表达式
  例如：<span>Message: {{ msg }}</span>
  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 } }}

2.vue指令系统

v-text

<!-- 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 指令：
例如： 
<div v-html="rawHtml"></div>
    new Vue({
        data:{
            rawHtml:'<h1>hello world</h1>'
        }
})


被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}}

v-bind

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


2、举例：
    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-show/v-if

使用场景： 初次加载开销较大的时候使用   v-if 
          频繁切换显示或者隐藏的时候使用  v-show
注意：v-else一定要结合v-if使用，否则会报错。

v-on

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

2、常用事件：
    v-on:click
    v-on:keydown
    v-on:keyup
    v-on:mousedown
    v-on:mouseover
    v-on:submit
    ....

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

  4、<!-- 阻止默认行为，没有表达式 -->
   <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/ 获取到当前按下键所对应的数字

特殊：
方法写到data中虽然变量更改没有响应，但是方法还是可以被触发的。
在这里插入图片描述

m0_46152845

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
逆战——vue篇（一）

什么是MVVM- M => Model(数据模型)- V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)- VM => ViewModel(一个同步View和Model的对象)Vue初体验<!DOCTYPE html><html lang="en"><head> <meta chars...
复制链接

扫一扫