学习vue必会的7个基础知识

1.v-bind:或:属性绑定,等同于普通html的属性

v-bind:等同于:

<h1 v-bind:title="msg">
</h1>

鼠标放上去，显示msg.

2.事件绑定v-on或@,等同于普通html的on事件

等同

<h1 v-on:click="clickfunc">
	标题
</h1>

3.v-model,双向绑定相对于v-bind

<input type="text" v-model="showTxt"/>
<input type="text" v-bind:value="showTxt"/>

4.v-for的用法

<div v-for="(item,i) in 3" :key="i">
  <h2>{{item}}</h2>
</div>

5.vue生命周期,created,mounted函数的使用。

export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'v-bind title',
          msg2:': title',
          showTxt:'',
        }
      },
      created(){
        console.log("created");
      },
      mounted(){
        console.log("mounted");
      },
      methods:{
        showInfo(info){
          alert(info)
        },
        
      }
    }

6.组件的注册与使用,常用的是单个vue就是一个组件。

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

7.axios与跨域问题

在 config/index.js修改代理:

proxyTable: { 
      '/api': {  //使用"/api"来代替" http://dev.highersoft.net:8081 //http://www.highersoft.net " 
        target: 'http://www.highersoft.net', //源地址 
        changeOrigin: true, //改变源 
        pathRewrite: { 
          '^/api': 'http://www.highersoft.net' //路径重写 
          } 
      } 
    },

使用axios请求后端接口时，可这样。用/api来代替域名

this.$axios.get('/api/gyinfoIndex/getBannerPic.action').then(res=>{
                
                console.log(res);
                //debugger;
                //res.data是axios的名，里面是返回的数据
                let rst=res.data.data;
                
                this.hotProducts=rst.hotProducts;
            });

文/程忠浏览次数：0次 2022-10-27 09:08:07

学习vue必会的7个基础知识

相关阅读