Vue知识点小结_vue [topnav.name]: topnav 是什么语法-CSDN博客

本文链接：https://blog.csdn.net/qq_43496316/article/details/102858904

一.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