Vue

基础

语法

<div id="app">
    <h1>{{ title }}</h1>
    <div>
        <span>{{ views+1 }}</span>
        <span>{{ type ? '原创' : '转载' }}</span>
    </div>

</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            title : 'hello',
            views : 1152,
            type : true
        }
    });
</script>

指令

<div id="app">
    <!-- HTML输出 -->
    <div v-html="content"></div>
    
    <a v-bind:href="home"></a>
    <!-- 简写 -->
    <a :href="home"></a>
    
    <button v-on:click="notice">提示</button>
    <!-- 简写 -->
    <button @click="notice">提示</button>
    
    <p>{{copyright()}}</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            content : '<ul class="list-unstyled"><li>列表1</li><li>列表2</li></ul>',
            home:'/home',
            company: 'Xcxxkj'
        },
         methods:{
            notice:function(event){
                alert('notice message');
            },
            copyright:function(event){
                return 'Copyright '+this.company
            }
        }
    });
</script>

计算属性

<div id="app">
    <div>{{ number }}</div>
    <div>{{ formatNumber }}</div>
    <div>{{ fullName }}</div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            number:7,
            firstName : "Jone",
            lastName: "Doe"
        },
        computed: {
            formatNumber:function(){
                return 'No. '+this.number+' ,';
            },
            fullName:{
                get:function(){
                    return this.firstName+' '+this.lastName;
                },
                set:function(val){
                    var names = val.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[names.length-1];
                },
            }
        },
    });
    vm.fullName = "Tom Tone";
</script>

条件判断,循环

<div id="app">
    <div v-if="status">根据status显示</div>
    <div v-show="status">根据status显示</div>
    
    <div v-if="score > 90">优秀</div>
    <div v-else-if="score > 80">良好</div>
    <div v-else>努力</div>

    <ul>
        <li v-for="(item,index) in lists">{{item.name}}</li>
    </ul>
    <ul>
        <li v-for="(value,key) in information">{{key}}-{{value}}</li>
    </ul>
</div>
<script>
var vm = new Vue({
    el:"#app",
    data:{
        status: true,
        score:75,
        lists:[{name:'jim'},{name:'lili'},{name:'tom'}],
        information:{nickname:'石武',age:18}
    }
});
</script>

Class,Style

<div id="app">
    <div class="box" style="font-size:38px;" 
        v-bind:class="{'box-active':isActive,'box-title':true}"
        v-bind:style="{'padding':boxPadding,'color':'red'}">
        样式
    </div>
    <code>
    {'box-active':true,'box-title':true} 可简写为 ['box-active','box-title']
    </code>
</div>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        isActive:true,
        boxPadding:'20px',
    }
});
</script>

事件处理

<div id="app">
    <input name="publish_time" v-bind:readonly="isReadonly" :disabled="isDisabled">
    <br>
    <input v-on:click="buttonClick" @keyup.enter="buttonEnter">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            isReadonly:false,
            isDisabled:true,
            buttonText:"按钮T",
        },
        methods:{
            buttonClick:function(){
                console.log('点击了');
            },
            buttonEnter:function(){
                console.log('回车了')
            }
        }
    });
</script>

组件

全局注册

<div id="app">
    <blog-post tag="国内" :title="blogTitle"></blog-post>
</div>
<script>
    Vue.component('blog-post', {
      props: ['title','tag'],
      data: function () {
        return {
          count: 0
        }
      },
      template: '<h3 v-on:click="count++">{{tag}} - {{ title }} - {{count}}</h3>'
    })
    var vm = new Vue({
        el:'#app',
        data:{
            blogTitle:"资料"
        },
    });
</script>

局部注册

<div id="app">
    <blog-post :title="blogTitle"></blog-post>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            blogTitle:"资料"
        },
        components:{
            'blog-post':{
              props: ['title','tag'],
              data: function () {
                return {
                  count: 0
                }
              },
              template: '<h3 v-on:click="count++">{{tag}} - {{ title }} - {{count}}</h3>
            }
        }
    });
</script>

过滤器

全局注册

<div id="app">
    <input v-model="message" type="text">
    <p>{{message | capitalize}}</p>
</div>
<script>
    Vue.filter('capitalize', function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    var vm = new Vue({
        el:'#app',
        data:{
            message:"helloworld"
        },
    });
</script>

局部注册

<div id="app">
    <input v-model="message" type="text">
    <p>{{message | capitalize}}</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"helloworld"
        },
        filters: {
          'capitalize': function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
          }
        }
    });
</script>