Vue基础（一）

Vue简介

           Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层，不仅易于上手，还便于与第三方库和既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页面应用提供驱动。

Vue实例

           Vue.js的核心是一个允许采用简洁的模板语法来声明式将数据渲染进DOM系统。

<div id="app">
      <p id="content">{{msg}}</p>
</div>

<script>
          var vm=new Vue({
               //表示当前Vue实例控制的是页面上的那块区域
               el:"#app",
               //data属性中存放的是el中要用到的数据
               data:{
                   msg:"欢迎学习Vue"
               }
          });
</script>

这是一个简单的Vue实例，看起来跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。

Vue指令

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

 <style>
        [v-cloak]{
            display: none;
        }
 </style>

<div id="app">
     <p id="content" v-cloak>{{msg}}</p>
</div>     

不会显示，直到编译结束
v-text
更新元素的textContent。如果要更新部分textContext。需要使用{{Mustache}}插值。

<span v-text="msg">+++</span>
<br> da
<span>++++{{msg}}---</span>          

v-html
更新元素的innerHTML。注意：内容按普通HTML插入-不会作为Vue模板进行编译。如果试图使用v-html组合模板，可以重新考虑是否通过组件来替代。

<div v-html="html"></div>

v-bind
动态地绑定一个或多个特性，或一个组件prop到表达式。在绑定class或style特性时，支持其它类型的值，如数组或对象，在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时class和style绑定不支持数组和对象。

<input type="button" value="按钮" v-bind:title="mytitle">

data:{
    mytitle:'自定义title'
}

.camel修饰符允许在使用DOM模板时将v-bind属性名称驼峰化，例如SVG的viewBox属性

<svg :view.box.camel="viewBox"></svg>

v-on
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。如果没有修饰符也可以省略。用在普通元素上时，只能监听原生DOM事件，用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event 属性：v-on:click="handle('ok', $event)"。

<button v-on:click="doThis">按钮</button>

methods:{
      doThis:function () {
            alert("Hello")
       }
}                   

事件修饰符：

• .stop阻止冒泡
• .prevent阻止默认事件
• .capture添加事件侦听器时使用事件捕获机制
• .self只有当事件在该元素本身（比如不是子元素）触发时触发回调
• .once事件只触发一次

v-model
一个组件上的v-model默认会利用名为value的prop和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将value特性用于不同的目的。model选项可以用来避免这样的冲突。

<!--使用v-model指令可以实现表单元素和model中数据的双向绑定-->
           <input type="text" style="width: 100%" v-model="something">

data:{
    something:"xxx"
}              

v-for
可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名

data{
     items: [
                       { message: 'Foo' },
                       { message: 'Bar' }
      ]
}

<ul id="example-1">
       <li v-for="item in items">
            {{item.message}}
       </li>
</ul>

在v-for块中，可以访问所有父作用域的属性，v-for还支持一个可选的第二个参数，即当前的索引。

<ul id="example-2">
       <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
       </li> 
</ul>               

data{
     parentMessage: 'Parent',
     items: [
                { message: 'Foo' },
                { message: 'Bar' }
      ]
}

也可以用v-for来遍历一个对象的属性

data:{
      object:{
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
      }
}

<ul id="v-for-object" class="demo">
       <li v-for="value in object">
            {{ value }}
       </li> 
</ul>               

可以使用提供的第二个参数为property 名称

<div v-for="(value, name) in object">
               {{ name }}: {{ value }}
</div>

还可以用第三个参数作为索引

<div v-for="(value, name, index) in object">
               {{ index }}. {{ name }}: {{ value }}
 </div>

使用v-for迭代数字

<p v-for="count in 4">这是第{{count}}个数字</p>

v-if
v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

data:{
   awesome:true
}

也可以用v-else添加一个else块

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-show
用于根据条件展示元素的选项

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

data:{
       ok:true
}

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

Vue中使用样式

使用class样式
1.数组

<h1 :class="['red','thin']">这是一个样式引用</h1>

2.在数组中使用三元表达式

<h1 :class="['red','thin',isactive?'active':'']">三元表达式样式引用</h1>

3.数组中嵌套对象

<h1 :class="['red','thin',{’active‘:isactive}]">嵌套对象</h1>

4.直接使用对象

<h1 :class="{red:true,thin:true,active:true,italic:true}">使用对象</h1>

使用内联样式
1.直接在元素上通过:style的样式，书写样式对象

<h1 :class="{color:'red','font-size':'40px'}">行内样式</h1>

2.将样式对象，定义到data中，并直接引用到.style中

• 在data上定义样式

data{
    h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中

<h1 :style="h1StyleObj">引用data样式对象</h1>

3.在:style中通过数组，引用多个data上的样式对象

• 在data上定义样式

data{
       h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'},
       h1StyleObj2:{fontStyle:'italic'}
}

• 在元素中，通过属性绑定的形式，将样式对象应用到元素中去

<h1 :style="[h1StyleObj,h1StyleObj2]">引用多个样式对象</h1>