1、 属性和方法
var vm = new Vue({ el:"#app", data:{ num:10 } , methods:{ //方法 getAllNum(){ this.num++; } }, computed:{ //属性 (第一次加载会放在内存中) getNumPlus(){ return this.num++; } } });
2、自定义指令
<div id="app"> <p v-ace>{{num|price}}</p> </div> <script type="text/javascript"> //自定义指令,可以有方法,所有指令都要以 v- 开头 Vue.directive("ace",{ //el指元素"ace",binding 这个对象包含了指令的很多信息 bind(el,binding){ //el.innerHTML = "<b>ACE</b>"; var price = parseInt(el.innerText).toFixed(2); el.innerText = price; },
//被绑定的元素插入父节点时调用 inserted(){
} }); var vm = new Vue({ el:"#app", data:{ num:10 },
filters:{
price(values){
return parseInt(values).toFixed(2);
}
} }); </script>
运行结果:10.00
3、全局组件
<div id="app"> //1、如想要大写这里要加下划线 <!--<my-header></my-header>--> //2、都小写的正常调用 <myheader></myheader> </div> <script> //全局组件 //1、myHeader 大写方式 //Vue.component("myHeader",{ //2、都小写 Vue.component("myheader",{ template:"<h1>This is Header</h1>" }) var vm = new Vue({ el:"#app", data:{ } }); </script>
4、局部组件
<div id="app"> //局部组件 <hello></hello> <world></world> </div> <script> var vm = new Vue({ el:"#app", data:{ } , //局部组件 components:{ "Hello":{ template:"<b>Hello everyOne</b>" }, "world":{ template:"<b>world everyOne</b>" } } }); </script>
5、模板组件
如果说组件的template内容结构比较简单,可以直接写在template选项中;但是当自定义组件的template内容比较复杂的时候,直接写就不合适了,也容易出错,所以:
对于这种状况Vue给出了自己的解决方案:使用模板,使用Vue的内置template模板来包裹着模板内容
<template id="foreignerName"> <!-- <template/>标签内部被包裹着的内容必须有且只有一个根元素,在这里的根元素是ul --> <ul> <li v-for="item in nameArr">{{item}}</li> </ul> </template>
这个模板要写在Vue实例的外面,这里template的id属性的值是自定义的,配合js部分用来标识模板内容;但是有一点值得注意,那就是被template包裹着的内容有且只有一个根元素,在这里是ul元素
JS部分
Vue.component("my-haha",{//如果template模板内容比较复杂,那么就可以这样做 template:"#foreignerName",//对应于template中的id属性 data:function(){ return { nameArr:["Alice","Marry","Athena"] } } })
HTML部分
<div id="container" v-cloak> <h3>{{name}}</h3> <!-- 当自定义组件的template模板内容比较复杂的时候 --> <my-haha></my-haha> </div>
<script> //调用模板 Vue.component("my-haha",{ template:"#foreignerName" }); </script>
---------------------------------------------------------------------------------------------------
HTML
//调用模板 <div id="app"> <mytemp></mytemp> </div> //自定义模板 <template id="temp"> <div> this is Temp {{msg}} </div> </template>
<script> //调用模板 Vue.component("mytemp",{ template:"#temp", data(){ return {msg:"Hello world"} } }); var vm = new Vue({ el:"#app", data:{ msg:"Hello world" } }); </script>
script模板方法
//调用模板 <div id="app"> <mytemp></mytemp> </div> //自定义模板 <script id="scr" type="text/template"> <h1> this is script {{msg}} </h1> </script> <script> //调用模板 Vue.component("mytemp",{ template:document.getElementById("scr"), data(){ return {msg:"Hello world"} } }); var vm = new Vue({ el:"#app", data:{ msg:"Hello world" } }); </script>