一.VUE的引用
- 在原有项目里添加
<body>
<script src="https://cdn.jsdeLivr.net/npm/vue@2.5.22/dist/vue. js"></script>
<script src="index. js"></script>
//在body的最下面js之前引用链接
</body>
- 创建一个新的VUE项目
控制台输入npm install -g @vue/cli
//安装全局下的vue
vue --version
//查看VUE版本号
vue ui
//自动打开浏览器 VUE的UI视图
在VUE的ui里面创建VUE工程,默认设置即可
- 提交项目至码云
复制新建仓库里的已有仓库代码后两行:
git remote add origin https://gitee. com/bamt chtest1/todo.vue.git
git push -u origin master
将代码复制到控制台,打开码云就可以看到提交的代码啦。
二、组件的使用
分三步:
1. 引用组件 import facePop from './components/facePop'
2. 注册组件 components = { facePop }
3. 使用组件 <facePop></facePop>
三、scoped有无的区别:
<style scoped>
</style>
有scoped:css文件只在当前vue文件下生效
否则全局生效
四、vue语法结构 v-for语法
<template>
<div class="topNavdaohang">
<ul>
<li v-for="item in navDates" :key="item.id"><a :href="item.href"><i :class="'iconfont '+item.icon"> </i>{{item.navName}}</a></li>
</ul>
</div>
</template>
<script>
export default {
data:function(){
return{
navDates:[
{
icon: "icon-1",
id:"1",
navName:"首页",
href:""
}]
}
}
}
</script>
<style scoped>
</style>
v-for语句使用注意要点:
1.v-for 是要加在要循环的节点上
2.改造标签属性值需要在属性值前面加’:’
3.在声明节点内部都能拿到该变量
4. (:key)的使用 在数据里面加id
5.注意引用src时要在方法里用require包裹一下
getImgUrl(icon){
return require("@/assets/"+icon);
}
v-if语句:
1.v-if和v-else-if和v-else要使用在同级标签里面
2.v-if里面的值要在data里面声明
<topNav v-if="isone"></topNav>
<banner v-else-if="istwo"></banner>
<left v-else></left>
<script>
export default {
data:function(){
return{
isone:false,
istwo:ture
}
}
}
</script>
v-show和v-if从浏览器上效果是一模一样的,但是v-show相当于css里的display:none;v-if是重新渲染,v-show只是隐藏起来
五、Vue动态样式:
<ul>
<li :class="{banner:isbanner}"></li>
<li></li>
</ul>
//这里的isbanner为ture
这里的key是css里面的样式,value是data声明的数据绑定。
<div class="bang" v-for="items in songhuabang" :key="items.id" :class="selectNav(items.id)">
</div>
methods:{
selectNav:
function(id){
if(id==="1"){
return "bianse";
}
return "";
}
}
在配合循环使用时应声明一个方法。
六、data的使用
和components是同级的,但是data里面必须返回一个function
export default {
name: 'app',
components: {
},data:function(){
return {
message:"hello"
}
}
}
</script>
七、vue的事件机制
通过函数写
<template>
<div @click="add">
{{message}},{{num}}
</div>
</template>
<script>
export default {
name: 'app',
components: {
},data:function(){
return {
num:10,
message:"hello"
};
},methods:{
add:function(){
this.num++
}
}
}
</script>
同样也能传值
<template>
<div @click="add(10)">
{{message}},{{num}}
</div>
</template>
<script>
export default {
name: 'app',
components: {
},data:function(){
return {
num:10,
message:"hello"
};
},methods:{
add:function(number){
this.num=this.num+number;
return this.num;
}
}
}
</script>
八、组件复用
为了实现子组件的复用,不能在子组件把数据写死,所以借助关键字props(和data是并列的)
export default {
props:["navDatas"],//这里props里面是字符串数组
data:function(){
return{
isshow:false
}
}
};
在子组件的v-for循环里正常使用该key值(navDatas)
<div class="topNavdaohang">
<ul>
<li v-for="item in navDatas" :key="item.id"><a :href="item.href"><i :class="'iconfont '+item.icon"> </i>{{item.navName}}</a></li>
</ul>
</div>
在父组件的data里面把数据填充进去
export default {
name: 'app',
components: {
topNav,banner,left,right
},
data:function(){
return{
navDatas:[
{
icon: "icon-1",
id:"1",
navName:"首页",
href:""
},{
icon: "icon-shipin",
id:"2",
navName:"视频",
href:""
},{
icon: "icon-faxian",
id:"3",
navName:"发现",
href:""
},{
icon: "icon-ziyuan",
id:"4",
navName:"游戏",
href:""
},{
icon: "icon-zhuce",
id:"5",
navName:"注册",
href:""
},{
icon: "icon-denglu",
id:"6",
navName:"登陆",
href:""
}
],
}
}
}
</script>
最后一步在标签里引用就可以啦
<topNav :navDatas="navDatas"></topNav>
//此时的:navDatas是子组件里的 props:["navDatas"],
//后面的value值是父组件data里面自定义的数据名称
子组件调父组件的方法
同样在子组件里声明props关键字,里面写进key值
props:["navDates","print1"]//这里的print1是key值
在子组件的methods里面的方法里调用父类方法(注意和data一样,使用this关键字)
methods:{
print2:function(){
this.print();
return "";
}
}
在子组件里的标签调用该方法
<input
type="text"
placeholder="大家正在搜:快船战胜马刺"
class="topNav input"
@click="print1"
>
在父组件的methods里面声明父组件方法
methods:{
print:function(){
alert("子组件调父组件方法");
}
}
在父组件中将该方法添加到子组件标签中
<topNav :navDates="navDates" :print1="print"></topNav>
九、初始化事件
在网页里会有打开网页视频自动播放等默认事件,在vue里需要引入mounted方法,它与data同级。
mounted:function(){
window.addEventListener("scroll",function(){
alert("vue初始化事件!");
})
}
处理事件用mounted,处理数据用created