vue指令标签

v-if:

写在html 标签 里面，里面一般来说写表达式，如果表达式为真，就显示这个标签里面的内容，具体例子如下:

<p id="app"> 
<h1 v-if="age >=25"> Age:{{age}}</h1> 
<h2 v-if = "name.indexOf('qing') >=0">Name :{{ name}}</h2> 
</p> 
<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

具体例子如下:

<p 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> 
</p> 
<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 后面

例子如下:

<p 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> 
</p> 
<script type="text/javascript"> 
var dataexample = { 
age : 26, 
name :'qingmei' 
}; 
new Vue({ 
el :'#app', 
data :dataexample 
}) 
</script> 
**

v-on:绑定方法

例子如下:

<p 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>
    </p>
    <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属性

例子如下:

<p 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> 
</p> 
<script type="text/javascript"> 
var dataexample = { 
pageCount : 26, 
activenumber :2 
}; 
new Vue({ 
el :'#app', 
data :dataexample 
}) 
</script> 
**

v-html:输出html 代码

例子如下：

<p id = "app">
    <p v-html = "message"></p>
</p>

<script>
    new Vue({
        el:'#app',
        data:{
            message:'<h1>你好</h1>'
        }
    })
</script>

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

例子如下:

<p 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>
    </p>
    <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:双向绑定

例子如下:

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

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

例子如下:

<p 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>
</p>

<script>
// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const foo = { template: '<p>foo</p>' }
const bar = { template: '<p>bar</p>' }

// 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,后端通信

例子如下:

<p id="app">

    </p>
    <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>