Vue 2.0 介绍与指令

最新推荐文章于 2023-07-12 23:18:28 发布

Lucky_LXG

最新推荐文章于 2023-07-12 23:18:28 发布

阅读量1.2k

点赞数

分类专栏： vue 2.0 文章标签： vue 2.0 vue的指令 vue指令快速入门 vue指令介绍小结 vue指令笔记

本文链接：https://blog.csdn.net/Lucky_LXG/article/details/55653922

版权

vue 2.0 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

Vue的介绍与指令

下述是我个人学习vue.js的些个人心得，如有不好的地方，请一定要留言下来，大家一起相互探讨，共同进步。

关于为什么写学习心得呢？

我个人觉得学习一个新的框架，看文档久了，不知不觉会有些疲倦，这就会导致学习效率降低，看多了，我们也会有些忘记，当我们边学习框架边做笔记，这样不仅能能让我们对学习的知识，记忆更加深刻，理解更加透彻，还能让我们查缺补漏，温故而知新，还可以持续保持我们的学习兴趣与激情，当积累多的笔记，你不知不觉会感到一股大成就感，这种感觉我相信会让我们很回味，也是我们人生的一种宝贵的经历，也许刚开始写学习心得，你可能觉得会花费很多的时间，也写的并不如意，跟我们想的会有些差异，的确，会花费我们很多得之不易的宝贵时间，刚开始写的并不好，但万事开头难，持之以恒，你会有收获，不管是技术的提升，个人毅力，人生阅历的提升，个人魅力不知不觉的散发，如身为单身人士，可能会收获到一份感情哦，结束单身，当我们写得多啦，量变就会引起质变，总之对我们以后的职业生涯，会有不言而喻的好处，个人小小的总结，希望对君能有所帮助，与君共勉。

一.vue.js 是什么？能做什么？有哪些核心的元素？

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架,以数据驱动和组件化的思想构建的。

Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

特点：易用灵活高效

二.安装

http://cn.vuejs.org/v2/guide/installation.html

具体的操作和基础的介绍，请看vue.js的中文介绍或者是vue的官网

三. 快速轻松入门

MVVM模式：

如上图所示：不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；

从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

事例：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 
 <body>
 <!--这是我们的View-->
 <div id="app">
 {{ message }}
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 // 这是我们的Model
 var exampleData = {
 message: 'Hello World!'
 }
 
 // 创建一个 Vue 实例或 "ViewModel"
 // 它连接 View 与 Model
 new Vue({
 el: '#app',
 data: exampleData
 })
 </script>
</html>

使用Vue的过程就是定义MVVM各个组成部分的过程：定义View 定义Model 创建一个Vue实例或"ViewModel"，它用于连接View和Model。

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；

data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，

所以页面上会输出"Hello World!"。

Vue.js的常用指令：

v-bind指令

v-show指令

v-else指令

v-for指令

v-model指令

v-on指令

v-if指令

v-model

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-model进行双向数据绑定</title>
</head>
<body>
<div id="vueInstance">
    输入您的姓名：<input type="text" v-model="name"/>
    <p>{{$data | json}}</p>
    <p>{{name}}</p>
</div>

<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<script>
    // 创建一个新的Vue实例，并设置挂载点
    var V = new Vue({
        el : '#vueInstance',
        data : {
            name : '_Appian'
        }
    });


    //    $data是Vue实例观察的数据对象，本质类型是一个对象，所以可以转成json。可以用一个新的对象替换。实例代理了它的数据对象的属性。
    //    {{}}，利用两个花括号进行插值。这里插入的值是$data实时变化的值。
    //    | json，只是一个更直观的能让数据展示出来的方法。也可以看做是一个过滤器，就像JSON.stringify()的效果一样。

</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vueInstance">
    <ul>
        <li v-for="el in products">
            {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
        </li>
    </ul>
</div>

<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
    var V = new Vue({
        el : '#vueInstance',
        data : {
            products : [
                {name: 'microphone', price: 25, category: 'electronics'},
                {name: 'laptop case', price: 15, category: 'accessories'},
                {name: 'screen cleaner', price: 17, category: 'accessories'},
                {name: 'laptop charger', price: 70, category: 'electronics'},
                {name: 'mouse', price: 40, category: 'electronics'},
                {name: 'earphones', price: 20, category: 'electronics'},
                {name: 'monitor', price: 120, category: 'electronics'}
            ]
        }
    });
</script>
</body>
</html>
  当然了，data中的数组对象，可以不用像上面这样定义也可以，我们可以从数据库导入，或者是利用ajax请求得到。这里只是为了演示v-for。
   有时候我们可能会需要拿到商品在数组对象里的对应下标。我们可以用$index来获得。
   //#1
        <li v-for="el in products">
           {{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
        </li>

  //#2
       <li v-for="(index,el) in products">
           {{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
       </li>

v-on

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>利用v-on进行事件绑定</title>
</head>
<body>
<div id="vueInstance">
    输入您的姓名：<input type="text" v-model="name"/>
   <button v-on:click="say">欢迎点击</button>
    <button @click="say">欢迎点击</button>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
    // 创建一个新的Vue实例，并设置挂载点
    var V = new Vue({
        el : '#vueInstance',
        data : {
            name : '_Appian'
        },
        methods : {
            say : function(){
                 alert('欢迎'+this.name);  /*this.name 为_Appian*/
            }
        }
    });
</script>
</body>
</html>

v-mode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用v-if或者v-show进行条件判定</title>
</head>
<body>
<div id="vueInstance">
    <section v-if="loginStatus">
        输入您的姓名: <input type="text" v-model="name">
        <button v-on:click="say">欢迎点击</button>
        <button @click="switchLoginStatus">退出登录</button>
    </section>
    <section v-if="!loginStatus">
        登录用户：<input type="text"/>
        登录密码：<input type="password"/>
        <button @click="switchLoginStatus">登录</button>
    </section>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
   var V = new Vue({
       el : '#vueInstance',
       data : {
           name : '_Appian',
           loginStatus : false
       },
       methods : {
           say : function(){
               alert('欢迎'+ this.name);
           },
           switchLoginStatus : function(){
               this.loginStatus = !this.loginStatus
           }
       }
   })
</script>
</body>
</html>

   this的执行就是实例V。this的指向是一个需要自己去搞懂的问题，这里不多说。
   在上述例子中，只要把V-if换成v-show，一样可以获得等同的效果。同时v-if和v-show他们都支持v-else，
   但是绑定v-else命令的标签的前一兄弟元素必须有 v-if 或 v-show。
   在上面的例子中，只要点击“登录”或者“退出登录”按钮都会触发switchLoginStatus方法，
只要触发了这个方法就会导致loginStatus的状态变化（在true和false中进行切换），
从而改变了html中的v-if的判断条件结果的变化，基于当前的loginStatus的布尔值的状态，
使得显示的section是不同状态下的section。
 v-show和v-if之间有什么区别呢?
   在切换 v-if 块时，Vue有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。
   v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
   v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译
   （编译会被缓存起来）。
    相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
    一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
    因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
    这个差别也许对你目前的开发来说并不重要，但是你还是要注意和留心，
    因为当你的项目开发变大的时候，这点会变得重要起来。

v-else

可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <div id="app">
 <h1 v-if="age >= 25">Age: {{ age }}</h1>
 <h1 v-else>Name: {{ name }}</h1>
 <h1>---------------------分割线---------------------</h1>
 <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
 <h1 v-else>Sex: {{ sex }}</h1>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 age: 28,
 name: 'keepfool',
 sex: 'Male'
 }
 })
 </script>
</html>

v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
这段代码中v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else仍然渲染到HTML了。

v-html

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

<divv-html="rawHtml"></div>

被插入的内容都会被当做 HTML —— 数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。

v-text

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

    <span v-text="msg"></span>
    <!-- 和下面的一样 -->
    <span>{{msg}}</span>

v-else-if

v-else-if，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

   <div v-if="type === 'A'">
       A
   </div>
   <div v-else-if="type === 'B'">
       B
   </div>
   <div v-else-if="type === 'C'">
       C
   </div>
   <div v-else>
       Not A/B/C
   </div>

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<spanv-pre>{{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  
  
   
   //css
  
  
  
  
   
   [v-cloak] {
  
  
  
    
   
   display: none;
  
  
  
  
   
   }

  
  
   
   //Html
  
  
  
  
   
   <div v-cloak>
  
  
  
  
   
     {{ message }}
  
  
  
  
   
   </div>vf

不会显示，直到编译结束。

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

  
  
   
   <!-- 单个元素 -->
  
  
  
  
   
   <span v-once>This will never change: {{msg}}
   
   </span>
  
  
  
  
   
   <!-- 有子元素 -->
  
  
  
  
   
   <div v-once>
  
  
  
    
   
   <h1>comment
   
   </h1>
  
  
  
    
   
   <p>{{msg}}
   
   </p>
  
  
  
  
   
   </div>
  
  
  
  
   
   <!-- 组件 -->
  
  
  
  
   
   <my-component v-once :comment="msg">
   
   </my-component>
  
  
  
  
   
   <!-- v-for 指令-->
  
  
  
  
   
   <ul>
  
  
  
    
   
   <li v-for="i in list" v-once>{{i}}
   
   </li>
  
  
  
  
   
   </ul>

四.问题

需注意：

1.data中的msg所对应的值不能用""来包裹，要用''来包裹

  export default {
           name: 'hello',
           data () {
              return {
                 msg: 'Welcome to Your Vue.js App'
             }
          }
 }

还没写完，会慢慢一点点添加