1.v-bind和v-on的区别
v-bind绑定的函数是立即执行的
v-on是需要一定触发执行的
2.computed和methods的区别
computed的函数是设置属性的
methods的函数是设置事件的
2.如果项目不是特别的需要单页面。可以直接把vue当成是jquery使用!
3.理解数据驱动和DOM驱动:
用两个简单的例子比较一下:
这是DOM驱动的 如果是span的class名字变化的 那么这个操作就要重新编写
function text(){
return "hello world;"
}
$(".spantext").text(text());
这是数据驱动的 只要保证app和msg不变的话 span的class的名字随便变化 也是不会出错的
<div id="app"><span class="spantext">"{{msg}}</span></div>
new Vue({
el:'#app',
data:{
msg:'hello world'
}
})
4.利用vue-cli构建项目的时候:
有时候会出现以下这种错误,这种错误的原因是,在你初始化的时候有个这个问题Use ESLint to lint your code? (Y/n),你可以重新初始化将它设置为n就成了
这是因为eslint会规范js代码,错误就是你可能是多了个空格什么的
5.在实际的项目的时候,用的是export default代替new Vue
export default代替new Vue
export default({
name:'demo',//组件的名字
data(){//初始化
return{
}
},
computed:{//一开始
save(){
}
} ,
methods:{//需要有动作
apply(){
}
}
})
6.在用vue-vli编写组件的时候,如果出现这样的问题的话
这种表示的可能是你的template中代码,需要一个根节点,你就可以在代码的最外面写一个div。当然具体问题,具体分析,我遇到的是这种情况!
7.怎样给vue中添加全局函数或者全局变量
插件utile.js
export default{
install(Vue,options){
Vue.prototype.getData=function(){
console.log(‘插件’)
}
}
}
main.js 引入 并且全局注册
import util from './util'
Vue.use(util);
其他组件使用
this.getDate()
8.在vue-cli中页面中的一部分是另一个页面,导入到这个页面,这个页面的编写:
需要导入的页面view.vue
<template>
<div>
...
<myview></myview>
</div>
</template>
<script>
import Myview from './view.vue'
export default {
...
components:{
"myview":Myview
}
}
</script>
这也是组件
9.在一个页面中methods中两个函数互相调用:
methods:{
a(){
...
this.b();
} ,
b(){
...
}
}
10.从一个页面加参数跳转到另一个页面?
<div class="home-every" v-for="(item,index) in homelists" :key="index" v-on:click="clickDetail(item._id)" :data-Id="item._id">
<h3 >{{item.title}}</h3>
<div style="height:30px;line-height:30px;">
<p><span><img src="static/time.png"></span>{{item.time}}</p>
<p><span><img src="static/sort.png"></span>{{item.sort==1?"文章":"随笔"}}</p>
<p><span><img src="static/user.png"></span>{{item.author}}</p>
</div>
<div style="margin-top:15px;">{{item.con}}</div>
</div>
//点击进入详情页面
clickDetail(e){
this.$router.push({path:'/detail/view',params:{userid:e}})
},
11.在新页面加入一个页面
在router中写入
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import home from '@/components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path:'/home',
name:'home',
component:home
},
]
})
12.vue中实现选项卡可以直接用动态组件