Vue.js上

Vue.js

1.什么是Vue.js

1).Vue.js是一个JavaScri的库。

2).Vue.js本身只专注于UI层面，并且核心价值永远都是API的简洁。

3).其他功能比如路由、ajax等，只会提供可选的模块。

2.简单入门

1).可以直接在页面中利用script标签引入。Vue会被注册为全局变量。2).对于生产环境来说，可以链接到一个明确的版本号和构建文件。3).Vue构建大型应用时可以使用NPM安装。

Vue实例

1.创建Vue实例

每一个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的：var vm =new Vue({})创建Vue实例时，可以传入一个选项对象。一个Vue应用由一个通过new Vue创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成。所有的Vue组件都是Vue实例，并且接受相同的选项对象。

2.数据与方法

当一个Vue实例被创建时，它将data对象的所有属性加入到Vue的响应式系统中，并且这些值发生改变时，视图都将会产生相应的改变。这些数据改变时，视图进行重新渲染。但是添加新属性时，不会改变，所以一般提前创建并赋值为null或者空字符。Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法改变。

3.实例生命周期钩子

<div id="app">
  <ul>
    <li v-for="(value,key,index) in object">
   {{ index }} :{{ key }} : {{ value }}    
    </li>
  </ul>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      Object:{
        name:"张三",
        sex:"男",
        age:"18"
     }
   }
})
</script>

模板语法

1.文本

数据绑定最常见的形式Mustache语法的文本插值

<span>{{ message }}</span>

mustache标签会被替代为对应数据对象上的message属性的值，只要绑定的数据对象上message属性发生了改变，插值处的内容会更新。

通过使用v-once指令，可以执行一次性的插值，当数据改变时，插值处的内容不更新。

2.原始HTML

双大括号mustache语法会将数据解释为普通文本，而非HMTL代码块。如果要输出真正的HTML需要使用v-html指令。但是容易遭到xss攻击。不能对用户提供的内容使用插值。

3.属性

属性中值应使用v-bind指令。此时可以用CSS样式进行渲染。

<style>
    .class1{
       font-size: 60px;
        }
</style>
<div id="app">
    点我变大<input type="checkbox" v-model="use"/>
    <span v-bind:class="{'class1':use}">看我变大</span>
</div>
<script>
  new Vue({
        el:"#app",
        data:{
            use:false
            }
        })          
</script>

4.表达式

Vue.js提供了完全的JavaScript表达式支持。

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">hhh</div>
</div>
  <script>
    new Vue({
    el: '#app',
    data: {
       ok: true,
       message: 'RUNOOB',
       id : 1
     }
   })
</script>

5.指令

指令是带有v-前缀的特殊属性，指令用于表达式的值改变，将某些行为应用到DOM上。

6.参数

参数在指令后以冒号指明。比如，v-bind指令用来响应地更新HTML属性。

<a id="app" v-bind:href="url">百度</a>
<srcipt>
   new Vue({
   el:"#app",
   data:{
     url:"http://baidu.com"
    } 
  }
})
</srcipt>

这里的herf是参数，告知v-bind指令将该元素的属性表达式和url的值绑定。

v-on:click="" 此时是绑定是用于监听DOM事件

7.修饰符

修饰符是以半角号.指明的特殊后缀，用于指出一个指令应以特殊方式绑定。

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

.prevent修饰符告诉v-on指令对于触发事件调用event.preventDefault();

8.过滤器

Vue.js允许自定义过滤器，被用作一些常见的文本格式化。由管道符指示。

用Mustache语法表示为:{{ message | capitalize }}

在v-bind指令中

<div v-bind:id="rawId | formatId"></div>

实例：

 div id="app">
    {{ message | capitalize }}  
 </div>
<script>
   new Vue({
     el:"#app",
     data:{
       message:"running"
     },
     filters:{
       capiralize:function(value){
         if(!value)return''
         value=value.toString()
         return value.charAt(0).toUpperCase()+value.slice(1)
     }
  }     
})
</script>

##### 9.缩写 

Vue.js为两个最常用的指令提供了特别的缩写

v-bind缩写

<a v-bind:href="url"></a>
<a:href="url"></a>
v-on缩写
<a v-on:click=""></a>
<a @click=""></a>

10.双向绑定

<div id="app">
 <p> {{ message }} </p>
 <input v-model="message">
</div>
<script>
  new Vue({
   el:"app",
       data:{
         message: "hello world"
         }
    })
<script>

11.处理用户输入

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button> //v-on
</div>
<script>
 new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () { //方法名字和click中互相对应
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script> 

Vue.js条件语句

1.条件判断v-if

在元素中和template中使用v-if指令

<div id="app">
  <p v-if="seen">see me</p>
  <template v-if="ok">
    see you 
    see me
  </template>
</div>
<script>
   new Vue({
     el:"#app",
     data:{
       seen:"true",
       ok:"true"
      }
 })
</script>

v-if指令将根据表达式seen的值来决定是否插入p元素

2.v-else

可以用v-else指令给v-if添加一个else块

<div id="app">
  <div v-if="Math.random()>0.5">
    我大于0.5
  </div>
  <div v-else>
    我小于0.5
  </div>
</div>
<script>
   new Vue({
     el:"#app"
})
</script>

3.v-else-if

v-else-if为2.1.0版本新增。用作v-if的eles-if块。可以链式的多次调用。

<div id="app">
  <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>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      type:'C'
}
})
</script>

4.v-show

也可以使用v-show指令根据条件展示元素：

<h id="app" v-show:"ok">hello</h>
<script>
  new Vue({
    el:"#app",
    data:{
      ok:true
}
})
</script>

Vue.js循环语句

1. v-for

循环使用v-for。

v-for指令需要以site in sites形式的特殊语法，sites是数据源并且site是数组元素迭代的别名

v-for可以绑定数据到数组来渲染一个列表。

<div id ="app">
   <ul>
      <li v-for="todo in todos">
      {{ todo.text }} //循环遍历输出todos中的内容 todo为循环的变量
      </li>
   </ul>  
</div>
<script>
      new Vue({
         el:"#app",
         data:{
         todos:[
           {text:'123'},
           {text:'456'},
           {text:'789'}
               ]
           }
      })  
 </script>

2.v-for迭代对象

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}    
    </li>
  </ul>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      Object:{
        name:"张三",
        sex:"男",
        age:"18"
     }
   }
})
</script>

3.v-for可以提供第二个参数为键名

<div id="app">
  <ul>
    <li v-for="(value,key) in object">
    {{ key }} : {{ value }}    
    </li>
  </ul>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      Object:{
        name:"张三",
        sex:"男",
        age:"18"
     }
   }
})
</script>

3.v-for使用第三个参数作为索引

<div id="app">
  <ul>
    <li v-for="(value,key,index) in object">
   {{ index }} :{{ key }} : {{ value }}    
    </li>
  </ul>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      Object:{
        name:"张三",
        sex:"男",
        age:"18"
     }
   }
})
</script>

4.v-for迭代整数

<div>
   <ul>
     <li v-for="n in 10">
     {{ n }}
     </li>
  </ul>  
</div>
<script>
  new Vue({
    el:"#app"
})
</script>

Vue.js计算属性

1.计算属性实例

<div id="app">
  <p>原始字符串:{{ message }}</p>
  <p>反转之后的字符串:{{ reversedMessage }}</p>
</div>
<script>
 new Vue({
   el:"#app",
   data:{
     message:"running"
},
   computed:{
     reversedMessage:function(){
   return this.message.split('').reverse().join('')
}
}
})
</script>

声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 reversedMessage 的 getter 。

reversedMessage 依赖于 message，在 message 发生改变时，reversedMessage 也会更新。

2.computed和methods

可以使用methods来替代computed，效果都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染时，函数总会重现调用执行。一般来说，computed性能更好，但是不需要使用缓存，可以使用methods属性。

3.computed setter

computed的属性只有getter，需要时也可以提供一个setter

<div id="app">
  <p>{{ site }}</p>
</div>

<script>
  var vm=new Vue({
    el:"#app",
    data:{
      name:"Google",
      url:"http://www.google.com"
},
    computed:{
      //getter
      get:function(){
  return this.name+''+this.url
}     
      //setter  
      set:function(new Value){
  var names=new Value.split('')
      this.name=newValue.spilt('')
      this.url=names[names.length-1]
}
}
})
  vm.site='百度 htpp://www.baidu.com'
  document.write('name'+vm.name);
  document.write('<br>');
  document.write('url'+vm.url);
</script><div id="app">
  <p>{{ site }}</p>
</div>

<script>
  var vm=new Vue({
    el:"#app",
    data:{
      name:"Google",
      url:"http://www.google.com"
},
    computed:{
      //getter
      get:function(){
  return this.name+''+this.url
}     
      //setter  
      set:function(new Value){
  var names=new Value.split('')
      this.name=newValue.spilt('')
      this.url=names[names.length-1]
}
}
})
  vm.site='百度 htpp://www.baidu.com'
  document.write('name'+vm.name);
  document.write('<br>');
  document.write('url'+vm.url);
</script>

在运行 vm.site = ‘’; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

Vue.js监听属性

1.watch

<div id="app">
  <p>{{ count }}</p>
  <button @click="count++">点我</button>
</div>

<script>
   var vm=new Vue({
     el:"#app",
     data:{
       count:0
}
})
   vm.$watch("count",function(nval,oval){
     alert("new"+oval+",new"+nval)
})
</script>

2.实例

<div id="app">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
      <div>
        <p id="info"></p>
      </div>
</div>
<script>
 var vm =new Vue({
   el:"#app",
   data:{
     kilometers:0,
     meters:0
},
   methods:{},
   computed:{},
   watch:{
     kilometers:function(val){
        this.kilometers=val;
        this.meters= this.kilometers*1000
}
     meters:function(val){
        this.meters=val;
        this.kilometers=val/1000
     }
  }
})
 vm.$watch("kilometers",function(nval,oval){
  documetn.getElmentById("info").innerHTML="修改前值为: " + oval + "，修改后值为: " + nval;
})
</script>

上述代码中创建两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。当再次输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

Vue.js样式绑定

1.Vue.js中的class

class与style是HTML元素的属性，用于设置元素样式，在Vue.js中可以用v-bind来设置样式属性。Vue.js用v-bind处理

class和style时，专门进行了增强。表达式结果除了字符串外，还可以是对象或数组。

2.设置单个对象

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

2.传入多个属性动态切换多个class

<style>
    .class1{
        width: 100px;
        height: 100px;
        background-color: green;
        }
    .class2{
        background: red;
        }
        </style>
    <div id="app">
        <div class="static" v-bind:class="{class1: c1 ,'class2':c2}"></div>
    </div>
    <script>
          new Vue({
            el:"#app",
            data:{
                c1:true,
                c2:true
            }
          })
    </script>

3.直接绑定数据里的对象

<style>
    .class1{
        width: 100px;
        height: 100px;
        background-color: green;
        }
    .class2{
        background: red;
        }
</style>
<div id="app">
        <div  v-bind:class="classobject"></div>
</div>
<script>
   new Vue({
     el:"#app",
     data:{
       classobject:{
         class1:true,
         class2:true
}
}
})
</script>

4.绑定返回对象的计算属性

<style>
.base {
  width: 100px;
  height: 100px;
}
.active {
  background: green;
}
.text-danger {
  background: red;
}
</style>
<div id="app">
  <div v-bind:class="classobject"></div>
</div>

<script>
   new Vue({
     el:"#app",
     data:{
          isActive: true,
        error: {
          value: true,
          type: 'fatal'
      }
   },
     computed:{
       classobject:function(){
  return{
    base:true,
    active:this.isActive && this.error.value,
    'text-danger': this.error.value && this.error.type === 'fatal',
       }
     }
   }
})
</script>

5.数组语法

<style>
   .active {
      width: 100px;
      height: 100px;
      background: green;
      }
   .text-danger {
       background: red;
    }
</style>

<div>
  <div v-bind:class="[activeclass,errorclass]"></div>
</div>

<script>
   new Vue({
     el:"#app",
     data:{
       activeclass:"active",
       errorclass:"text-danger"
}
})
</script>

6.三元表达式切换

<style>
   .text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
</style>

<div id="app">
  <div v-bind:class="[errorclass,isActive ? activeclass : '']"></div>
</div>

<script>
  new Vue({
    el:"#app",
    data:{
      isActive:false,
      activeclass:'active',
      errorclass:'text-danger'
}
})
</script>

7.Vue.js中的Style(内联样式)

<div>
   <div v-bind:style="{color: c1 ,fontSize:f1+'px'}">你好</div>
</div>
<script>
  new Vue({
    el:"#app",
    data:{
      c1:"green",
      f1:30
}
})
</script

8.直接绑定样式对象

<div>
  <div v-bind:style="styleobject">你好</div>
</div>
<script>
   new Vue({
     el:"#app",
     data:{
       styleobject:{
         color:"green",
         fontSize:"30px"
}
}
})
</script>

9.使用数组将多个样式对象应用到一个元素上

<div>
   <div v-bind:style="[basestyle,activestyle]" >你好</div>
</div>
<script>
   new Vue({
     el:"#app",
     data:{
       basestyle:{
         color:"green",
         fontSize:"60px"
},
       activestyle:{
         "font-weight":"bold"
}
}
})
</script>