1、 Vue.directive('自定义标签名称,如v-stephen', function(el,binding){
el.style='color:'+binding.value;
})
2、Vue.extend():定义的是静态标签,没有传递任何参数
写法两种:
(1). 定义标签法:<author></author> // 不带任何属性
(2). 挂载在普通标签中:<div id="author"></div> // 普通标签中
上述两种方法定义静态标签必须使用
new authorExtend().$mount('#author'); //普通id法 |
new authorExtend().$mount('author'); //标签法 |
对标签进行初始化
JS:
var authorExtend = Vue.extend({
template:"<p><a :href="authorUrl">{{authorName}}</a></p>",
data:function(){
return{
authorName:'Stephen',
authorUrl:'http://www.baidu.com' // 这里http的传输协议必须加上
}
}
})
3、Vue.set
Vue.set(app.arr,1,'ddd');
4、template标签写在选项(Vue)里,使用``符号括在其中,``是Tab按键上的。
5、组件分为全局组件(在JavaScript里定义Vue.comonent(...))、局部组件(在选项(Vue)里定义的components:{...})
6、组件属性的定义
props:['here']
7、父子组件嵌套
var jspang = {
template:`<div>
<p> Panda from China!</p>
<city></city>
</div>`,
components:{
"city":city
}
}
8、component标签
<component v-bind:is="who"></component> |
9、template标签
<script type="x-template" id="demo3"> |
10、propsData 在全局扩展时进行传递数据
new header_a({propsData:{a:1}}).$mount('header');
11、computed 对原数据进行改造输出(包括格式的编辑,大小写转换,顺序重排,添加符号……)
computed:{
newPrice:function(){
return this.price='¥' + this.price + '元';
}
}
12、methods选项中构造器里的原生事件
<p><btn @click.native="add(3)"></btn></p>
13、子路由的配置:
children:[
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
14、参数传递
1、route.name传值
// router/index.js
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
// components/Hello.vue
<p>{{ $route.name}}</p>
2、route-link标签传值
// app.vue
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
// router/index.js
{path:'/hi1',name:'hi1',component:Hi1}
// components/Hi1.vue
{{$route.params.username}}
15、单页面多路由:一个vue文件中存放多个route-view
// app.vue
<router-view ></router-view>
<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
// route/index.js
routes: [
{
path: '/',
components: {
default:Hello,
left:Hi1,
right:Hi2
}
},{
path: '/Hi',
components: {
default:Hello,
left:Hi2,
right:Hi1
}
}
]
16、url传递参数
// index.js
path:'/params/:newsId/:newsTitle'
// app.vue
<router-link to="/params/198/jspang website is very good">params</router-link>
//components下vue文件引用
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
正则:path:'/params/:newsId(\\d+)/:newsTitle' // 只允许newsId为数字
17、重定向和别名
// index.js
path:'/goback',
redirect:'/'
// 别名
path: '/hi1',
component: Hi1,
alias:'/jspang'
18、过度动画
<transition name="fade" mode="out-in">
<router-view ></router-view>
</transition>
19、404页面处理
{
path:'*',
component:Error
}
20、模板中的钩子函数
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave:(to, from, next)=> {
console.log("准备离开路由模板");
next();
}
21、编程式导航:
methods:{
goback(){
this.$router.go(-1); //返回
this.$router.go(1);//前进
this.$router.push('/');//返回首页
}
}