vue入门以及Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

1.最简单实例

<div id="app">
    {{message}}
</div>

new Vue({
el:"#app",
data:{
    message:"Hello Wrld"
}
})

vue.js组件的重要选项：data,methods

    new Vue({
        data:{
            a:1,
            b:[]
        },
        methods:{//方法
            doSomething:function(){
                this.a++
            }
        },
        watch:{//监听
            'a':function(val,oldVal){
                console.log(val,oldVal)
            }
        }
    })

模板指令：-html和vue对象的粘合

数据渲染：v-text  v-html  {{}}

 

模板指令：v-if    v-show

控制模块隐藏：v-if v-show（控制元素的显示和隐藏）
区别

<p v-if="isShow"></p>  //v-if不渲染这个dom元素
<p v-show="isShow"></p>  //v-show是通过css样式，display:none进行隐藏

new Vue({
    data:{
        isShow:true
}
})

渲染循环列表 :v-for

<ul>
    <li v-for="item i items">
        <p v-text="item.label"></p>
    </li>
</ul>

data:{
            items:[
                {
                    label:'apple'
                },{
                    label:'banana'
                }
            ]
        }

事件绑定 v-on

<button v-on:click="doThis"></button>
<button @click="'doThis"></button>  //简写的

        methods:{//方法
            doSomething:function(someThing){
                
            }
        }

属性绑定 v-bind

//绑定自定义属性

//v-text="item.partsName"代替{{item.partsName}} ，自定义属性:partId="item.partsId" 和v-bind:partId="item.partsId"效果一样

<dd v-for="item in part.parts" v-text="item.partsName" :partId="item.partsId"></dd>  //循环

<img v-bind:src="imageSrc"/>//字符串

<div :class="{red:isRed}"></div>//boolean,判断class是否为red
<div :class="[classA,classB]"></div>//字符串
<div :class="[classA,{classB;isB,classC:isC}]"></div>

 

Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

http://lib.csdn.net/article/reactnative/59973

 

 

 

然后重启

 

 添加高亮

 

 支持es6高亮