vue.js基础

作者: 海娩 | 来源:发表于2016-11-06 16:00 被阅读2435次

使用vue,js第一步先是安装(http://cn.vuejs.org/)
在官方文档中就可以直接下载并用 <script>标签引入，记住本地的Vue.js的位置，通过会被注册为一个全局变量。如：

     <script type="text/javascript" src="D:\软件小组/vue.js"></script>

vue介绍

vue是一套构建用户界面的 渐进式框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

最基本的实现方法：

      <div id="app" >
          {{message}}        //输出的纯文本用双大括号括着
      </div>
      <script type="text/javascript" >
        var vm=new Vue({
              el:'#app',    //元素的id
              data:{         //元素包含的数据
                  message:"good"
                  }
             })

Paste_Image.png
可以通过控制台console改变数据
这样的话可以多次改变数据，而通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新，另外一种就是在{{message}}改为{{*message}},同样也只能赋值一次

    <div id="app" >
      {{*message}}
    </div>
    <script type="text/javascript" >
      var vm=new Vue({
      el:'#app',
      data:{
        message:"hello"
      }
  })
      vm.message="wonderful";
    </script>        //hello

如果要输出真正的 HTML ，你需要使用v-html指令：

      <div id="app" >
        <div v-html="name"></div> //name为HTML代码，直接可以输出不需要双大括号
      </div>
      <script type="text/javascript" >
          var vm=new Vue({
          el:'#app',
          data:{
          name:"Amy",
            }
        })
      </script>

注意，你不能使用 v-html来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。*

条件与循环

    <div id="app" >
        <p v-if="look">{{message}}       //v-if 语句的形式，通过look的布尔值决定是否执行
        </p>
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
        el:'#app',
        data:{
          message:"good",
          look:true
              }
        })         //good

在通过控制台输出vm.look=false使得good的输出消失

循环：

    <div id="app" >
        <div v-if="look" >
          <p v-for="item in items">{{item.message}}     相当于 i in array的循环
          </p>
      </div>
    </div>
    <script type="text/javascript" >
      var vm=new Vue({
      el:'#app',
      data:{
         items:[               //数组和对象的要小心这些括号
              {message:"good"},
             {message:"study"},
             {message:"children"}
                  ],
        look:true
            }
         })

    </script>

Paste_Image.png
还可以在控制台上增添新的message值

     vm.items.push({message:"better"})

Paste_Image.png

事件

v-on事件

     <div id="app" >
        <button v-on:click="hello">Hello</button>   v-on进行连接click点击函数
    </div>
    <script type="text/javascript" >
      var vm=new Vue({
       el:'#app',
      methods:{            //方法
       hello:function() {
         alert("hey,girl");
                        }
               }
        })

    </script>

Paste_Image.png

<a v-on:click="doSomething"></a>

<a @click="doSomething"></a>

Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。如：

    <div id="app" >
        {{message}}
        {{name}}
        <br>
        <input v-model="name">
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
        el:'#app',
        data:{
          message:"hello",
          name:''
        }
      })
      </script>

Paste_Image.png

v-bind指令绑定class

    <style type="text/css">
      .active{
          color:red;
        }
      .static{
          background:green;
        }
    </style>
    <div id="app" v-bind:class="{active:isActive,static:isStatic}">
        {{message}}
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
               el:'#app',
               data:{
                   isActive:true,
                   message:'beauty',
                   isStatic:true
                 },  
        })//class属性的bind的

：

Paste_Image.png

//绑定Style属性

    <style type="text/css">
      .active{
      font-family:'Comic Sans Ms';
      background:blue;
      }  
  </style>
    <div id="app">
        <div v-bind:class="{active:isActive}">
            <div v-bind:style="{color:activeColor,fontSize:fontSize}">
            {{message}}
            </div>
        </div>
    </div>
<script type="text/javascript" >

  var vm=new Vue({
       el:'#app',
       data:{
       activeColor:'orange',
       message:"dodo",
       isActive:true,
       fontSize:'50',
     }
})

Paste_Image.png
//如果是想同时绑定两个东西，应该要多个包装，否则就会没有什么效果直接忽略后面的绑定，例如不能在同一个div中用bind绑定两个
bind语法

<a v-bind:href="url"></a>

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

计算属性

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>

computed例子：

 <div id="app">
   <p>{{message}}</p>
   <p>{{reverseMessage}}</p>
 </div>
<script type="text/javascript" >
    var vm=new Vue({
       el:'#app',
       data:{
       message:'live'

       },
       computed:{
       reverseMessage:function() {
       return this.message.split('').reverse().join('')
       }
       }
    })

结果：
live
evil
这个目的同样可以用methods的形式实现，但是对于methods，是每次执行都会重新调用一次函数，再从头开始，而对于计算属性来说，是基于它的依赖缓存，也就是说只要message的值不变，计算属性会一下子就出现之前出现的结果，而method又要经过冗长的过程

Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动

    computed: {
      classObject:function() {
        return {
            active:this.isActive && !this.error,
            'text-danger':this.error && this.error.type==='fatal',    //这是什么意思
            }
        }
    }

v-if条件渲染

    <div id="app">
    <div v-if="ok">{{message}}</div>
    </div>
    <script type="text/javascript" >
        var vm=new Vue({
         el:'#app',
         data:{
             message:"dodo",
             ok:true
         }
    })
  </script>   //注意的是v-if不能直接写在根元素上

template方法

<template>元素当做包装元素，并在上面使用 v-if，可以用来切换多个元素

    <div id="app" > 
      <template v-if="ok">
        <div  v-bind:style="{color:activeColor}">
          <h1>Title</h1>
          <p>Paragraph</p>
        </div>
      </template>
      {{message}}
     </div>
  <script type="text/javascript" >
      var vm=new Vue({
           el:'#app',
           data:{
           activeColor:'orange',
           message:"dodo",
           ok:true
         }
    })
  </script>

Paste_Image.png

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

  <div id="app" > 
    <template v-else>
        {{message}}
    </template>
  </div>
  <script type="text/javascript" >
      var vm=new Vue({
           el:'#app',
           data:{
               activeColor:'orange',
               message:"dodo",
               ok:true
           }
      })           //无效果

v-show另一个根据条件展示元素的选项是 v-show 指令
用法大体上一样：

 <h1 v-show="ok">Hello!</h1>

与v-if不同的是有 v-show的元素会始终渲染并保持在 DOM 中。v-show
是简单的切换元素的 CSS 属性 display

注意： v-show不支持 <template>语法，但是不会报错。

template v-for句式

    <div id="app" > 
      <ul>
         <template v-for="item in items">
             <li>{{item.message}}</li>
             <li v-bind:class="{active:isActive}"></li>
        </template>
      </ul>
    </div>
  <script type="text/javascript" >
        var vm=new Vue({
            el:'#app',
             data:{
                 isActive:true,
                 activeColor:'orange',
                 items:[
                    {message:"dodo"},
                    {message:"foolish"}
                   ]
               }
          })
    </script>

Paste_Image.png

列表渲染

      <style type="text/css">
        .active{
             font-family:'Comic Sans Ms';
             background:blue;
        }
      </style>
    <div id="app" > 
        <ul>
             <template v-for="(value,key) in items">    //遍历
                 <li v-bind:class="{active:isActive}">      //绑定class
                   {{$index}}.{{key}}:{{value}}</li>        //输出值
             </template>
        </ul>
      </div>
  <script type="text/javascript" >
       var vm=new Vue({
          el:'#app',
          data:{
             isActive:true,
             activeColor:'orange',
             items:{
                  wonder:"dodo",
                  message:"foolish"
                 }
             }
         })  
</script>

Paste_Image.png

    <div id="app" v-for="item in items">
        {{item.message}}
    </div>
    <script type="text/javascript" >
          var vm=new Vue({
              el:'#app',
              data:{
              items:[{message:"baby"}]
              }
          })
      </script>

结果：
baby
在控制台输入

    vm.items.push({message:"good"})

Paste_Image.png

再输入

    vm.items.pop()

输出：

Paste_Image.png

数组的变异方法手段还有

push()
pop()
shift() //从头部开始删除元素
unshift() //从头部开始增加元素
splice()
sort()
reverse()

#########注意

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

当你直接设置一个项的索引时，例如：
vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：
vm.items.length = newLength

解决第一个问题的方法：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

    var vm=new Vue({
          el:'#app',
          data:{
            items:[{message:"baby"},
                   {message:"hello"},
                   {message:"good morning"}
                  ]
              }
        })
    vm.items.splice(2,1,{message:'beauty'})  //改变数组中特定位置元素的值

Paste_Image.png

解决第二个问题的方法：

example1.items.splice(newLength)

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。然而这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，语句不会解析

    {{number+1}}    <!--把语句包含在双大括号内--!>

    <!-- 这是语句，不是表达式 -->
    {{ var a = 1 }}

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

事件修饰符

通过由点(.)表示的指令后缀来调用修饰符,处理 DOM 事件细节

stop
self
prevent
capture

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

#######按键修饰符
最常用例子：

    <input v-on:keyup.enter="submit">//用回车键进行操作提交

其他的常用键

enter
tab
delete
esc
space
up
down
left
right

网友评论

efdc82e3311a:this.error.type === 'fatal'是什么意思
绳_:@海娩同问'text-danger':this.error && this.error.type==='fatal' 后面那个什么意思
海娩:@biubiu_9767 你是报错了吗？？你可以给我看下你的代码，说不定可以帮到你
其心:example1.items.splice(newLength)这样改变数组的长度，并且触发状态更新看样子你是试过了，好使么？
唐紫依:什么是XSS攻击
海娩: @唐紫依噢噢⊙_⊙
唐紫依:@唐紫依主要是注入脚本，JavaScript或SQL
海娩:@唐紫依通过恶意插入HTML代码来攻击网站。。差不多吧。。

vue.js基础

vue介绍

条件与循环

事件

计算属性

v-if条件渲染

template方法

事件修饰符

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

小情绪