vue 指令标签

**

v-if:

** 写在html 标签 里面，里面一般来说写表达式，如果表达式为真，就显示这个标签里面的内容，具体例子如下:
<div id="app">
<h1 v-if="age >=25"> Age:{{age}}</h1>
<h2 v-if = "name.indexOf('qing') >=0">Name :{{ name}}</h2>
</div>
<script type="text/javascript">
var dataexample = {
age : 26,
name :'qingmei'
};
new Vue({
el :'#app',
data :dataexample
})
</script>

**

v-show:

**
v-show和 v-if的区别是v-if是不会渲染到html 中,只有判断为真的时候才会把标签渲染到html中
v-show 会渲染到html上，只是单纯对css的样式做修改，block 和 hide
具体例子如下:
<div id="app">
<h1 v-show="age >=24"> Age:{{age}}</h1>
<h1 v-if="age >=25"> Age:{{age}}</h1>
<h2 v-if = "name.indexOf('qing') >=0">Name :{{ name}}</h2>
</div>
<script type="text/javascript">
var dataexample = {
age : 26,
name :'qingmei'
};
new Vue({
el :'#app',
data :dataexample
})
</script>

**

v-else:

** v-else 是紧跟着 v-if 和v-show 后面
例子如下:
<div id="app">
<h1 v-show="age >=24"> Age:{{age}}</h1>
<h1 v-else>Age:24</h1>
<h1 v-if="age >=25"> Age:{{age}}</h1>
<h2 v-if = "name.indexOf('qing') >=0">Name :{{ name}}</h2>
<h1 v-else> error</h1>
</div>
<script type="text/javascript">
var dataexample = {
age : 26,
name :'qingmei'
};
new Vue({
el :'#app',
data :dataexample
})
</script>
**

v-on:绑定方法

**
例子如下:

<div id="app">        <p>            <input type="text" v-model="message">        </p>        <p>            <button v-on:click="greet"> 问候 </button>        </p>        <p>            <button v-on:click="say('qingeu')"> 说话 </button>        </p>    </div>    <script type="text/javascript">        var dataexample = {            message:"hello"        };        var ve= new Vue({            el :'#app',            data :dataexample,            //在methods定义方法            methods:{                greet:function(){                    alert(ve.message);                },                say:function(message){                    alert(message);                }            }        })    </script>

**

v-bind: 绑定html属性

**
例子如下:<div id="app">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascript:void(0)" v-bind:class="activenumber===n+1?'active':''">{{n+1}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
var dataexample = {
pageCount : 26,
activenumber :2
};
new Vue({
el :'#app',
data :dataexample
})
</script>
**

v-html:输出html 代码

**
例子如下：

<div id = "app">    <div v-html = "message"></div></div><script>    new Vue({        el:'#app',        data:{            message:'<h1>你好</h1>'        }    })</script>

**

v-for:从数组循环取数据

**
例子如下:

<div id="app">        <table>            <thead>                <tr>                    <th>姓名</th>                    <th>年龄</th>                    <th>性别</th>                </tr>            </thead>            <tbody>                <tr v-for="item in people">                    <td>{{ item.name }}</td>                    <td>{{ item.age}}</td>                    <td>{{ item.sex}}</td>                </tr>            </tbody>        </table>    </div>    <script type="text/javascript">        var dataexample = {            age : 26,            name :'qingmei'        };        new Vue({            el :'#app',            data :{                people:[{                    name:'Jack',                    age:30,                    sex:'Male'                },{                    name:'Back',                    age:26,                    sex:'Female'                },{                    name:'Gack',                    age:22,                    sex:'Male'                }                ]            }        })    </script>

**

v-mode:双向绑定

**
例子如下:

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

**

路由:一般适用于跳转链接

**
例子如下:

<div id="app">  <h1>Hello App!</h1>  <p>    <!-- 使用 router-link 组件来导航. -->    <!-- 通过传入 `to` 属性指定链接. -->    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->    <router-link to="/foo">首页</router-link>    <router-link to="/bar">详情</router-link>  </p>  <!-- 路由出口 -->  <!-- 路由匹配到的组件将渲染在这里 -->  <router-view></router-view></div><script>// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义（路由）组件。// 可以从其他文件 import 进来const foo = { template: '<div>foo</div>' }const bar = { template: '<div>bar</div>' }// 2. 定义路由// 每个路由应该映射一个组件。 其中"component" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。// 我们晚点再讨论嵌套路由。const routes = [  { path: '/foo', component: foo },  { path: '/bar', component: bar }]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({  routes:routes // （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能const app = new Vue({  router}).$mount('#app')// 现在，应用已经启动了！

**

vue前后端通信:类似于ajax,后端通信

**
例子如下:

<div id="app">    </div>    <script type="text/javascript">        Vue.component('runoob',{            template:'<h1>全局自定义组件</h1>'        });        var ve= new Vue({            el :'#app',            ready: function(){                //this.$http.post(url,postdata,function callback)                //get 简写                this.$http.get('url',function(data){                        this.$set('books',data);                }).error(function(data,status,request) {                });                //post 不简写                this.$http.jsonp({                    url:'lte/www.xxx.com',                    method:'POST',                    emulateJSON:true,                    data:{                        name:'zhangsan',                    }                }).then(function(response){                    console.log(response.data);                },function(response){                });            },            data:        })    </script>

**

vue组件：自定义组件

**
例子如下:

<script type="text/javascript">    Vue.component('runoob',{        template:'<h1>全局自定义组件</h1>'    });    var ve= new Vue({        el :'#app',    })</script>