vue基本语法

1、插值表达式

{{ 、、、 }}

大括号中可以写变量名，对象.属性等，还可以写入js语句

2.变量显示在界面上

v-text：

v-html：

两者的区别v-text把内容当纯文本处理，v-html遇到html的标签会当html代码处理

如：

v-text:

v-html:

3.v-moldel实现双向动态绑定

---

data:{

username: “”

}

当username改变时，页面上的username也会动态改变

页面上的username改变时，data中的username也会随之改变

4.事件绑定

v-on：@事件名=”函数“，可简化把v-on去掉

它拥有几个限定词：

@事件名.限定词=”函数“

.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次
关于冒泡：

先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。但是水在上升的过程中会经历不同的深度的水。
那么我们再来解释一下什么是事件冒泡，如果属性浏览器原理的同学就知道，页面是由文档流（即dom树组成的），当我们在
一个时间触发的时候，这个事件就像这个气泡一样，从dom树的底层，一层一层的往上面传递，一直传递到dom的根节点，如果子元素和父级元素触发的是相同事件的时候，当子元素被触发的时候父元素也会被触发冒泡机制，这就是冒泡的基本原理。

5.循环遍历（v-for）

.1.数组的遍历

v-for="(item,index) in items"

item：变量名

index：索引

items：数组

<li v-for="(item,index) in items">

2.对象的遍历

v-for="(value,key,index) in object"

value，对象的值
key， 对象的键
index, 索引，从0开始

<li v-for="(value,key,index) in person">

6.判断语法（v-show、v-if）

<p v-show="flag">测试</p>
<p v-if="flag1">测试</p> 
//如果flag和flag1的值为真<p>的内容就展示，否则不展示
    
    

两者区别在v-show如果值为假只是不展示，内容本身是还存在的

v-if的值为假不仅不展示，内容本身也不存了

7.显示数据（v-bind）

v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值

<标签名 v-bind:标签属性名=“vue实例中的数据属性名”/>

<标签名 :标签属性名=“vue实例中的数据属性名”/>

<input type="button" :value="msg"/>

8.vue实现页面跳转

1.导入router组件

import Router from 'vue-router'

2.导入两个界面

import Home from '@/pages/home/Home'
import List from '@/pages/list/List'

export default new Router({
  routes: [
    {path: '/',
      name: 'Home',
      component: Home
    },{
      path: '/list',
      name: 'List',
      component: List
    }
  ]
})

3.使用方法：

直接在div外部套一个router-link，这样点击div的时候就会跳转到list页面

<router-link to="/list">
    <div></div>
</router-link>

第二种方法就是给元素绑定一个click方法，引入一个@click属性，然后在methods中调用它

<div class="nav">
	<a class="home" @click="gohome"><span>home</span></a>
	<a class="list" @click="golist"><span>list</span></a>
</div>

methods: {
	gohome(){
		this.$router.replace('/home')
	},
	golist(){
		this.$router.replace('/list')
	}
}

还有一种标签跳转法

9.计算属性computed

计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.

computed:{
         属性名(){
             return "返回值";
         }

computed中的任何一个值改变，computed都会自动重新计算，返回计算值

监听属性watch：

  watch:{
        //监听message属性值,newValue代表新值,oldValue代表旧值
        message(newValue, oldValue){
        	console.log("新值："   newValue   "；旧值："   oldValue);
        },

两者区别：

1、计算属性有缓存，当缓存的依赖发生变化时，重新计算，返回一个返回值；

2、计算属性有getter和setter，默认为getter.监听属性不分set和get。

3、计算属性用来同步执行计算数据，监听属性可以有异步事件。

10.组件基础

1.两种注册方法：局部注册和全局注册

全局注册：

//全局注册，它们在注册之后可以用在任何新创建的 Vue 根实例
Vue.component('my-component-name', {                                            
/* ... */ 
})

当作标签使用

组件名时第一个参数，两种写法：my-component-name和MyComponentName，即用横杠 代替首字母大写。

局部注册：

首先可以通过js对象来定义组件：

var ComponentsA = {/*    */}
var ComponentsB = {/*    */}
var ComponentsC = {/*    */}

new vue({
el:'#app'
})

再通过components注册你想使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

在模板中的局部注册：

先impor导入，再在components里注册，之后可以在当前vue文件中直接使用了

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

在组件中，data是函数，将数据return回去,否则一个组件会影响其他组件

11.父子组件传值

父传子

...
<子组件名></子组件名>

....
data {
return {...}
},
...

子传父

子组件无法直接给父组件传递数据. 也无法操作父组件中的数据, 更无法调用父组件中的方法.

所以, 所谓的子组件向父组件通讯, 其实就是想办法让子组件调用父组件的方法. 进而响应到父组件中的数据.

props:{
            aaa:function(){},
            //定义bbb属性,用来绑定父组件的方法,当然,该定义也可以省略
            bbb:function(){},
        }, 

        methods:{
            fun1(){
                //找到aaa属性所绑定的那个方法,执行那个方法
                return this.$emit("aaa");
            },
            fun2(){
                //找到bbb属性所绑定的那个方法,执行那个方法
                return this.$emit("bbb");
            }
}

12.axios发送异步请求

1.使用npm先进行如下安装：

npm install axios

2.发送异步请求获取数据

常用get、post两种方法

最简单的实现，没有请求头之类的东西

get：

axios
      .get(               //get方法
        `http://120.26.12.5:8090/demo/api/articles/page=${this.page}&pageSize=${this.pageSize}`  //服务器网址
      )
      .then((res) => {   //res为变量名
        this.message = res   //本地变量message接收res
      })
      .catch((error) => {     //抓取错误
        console.log(error)    //打印错误
      })
  },

post：

axios
      .post('http://120.26.12.5:8090/demo/api/login', {    //服务器网址
        usename: 'muyi',     
        password: '022416',   //给该网址传值
      })
      .then((res) => {
        this.message = res     //本地变量message接受值
      })
      .catch((error) => {
        console.log(error)    //打印错误
      })

补充：

this.$nextTick箭头函数：this.$nextTick(（）=>{
…
}）
可以实现在组件属性改变后，立即拿到渲染后的DOM节点对象

<template>
  <div class="hello">
    <p ref="p_ref">
      当前姓名:<b>{{ name }}</b>
    </p>
    <button @click="changeName">改变名称</button>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
    changeName() {
      this.name = "李四";
      this.$nextTick(() => {   //如果这里没有this.$nextTick则无法打印
                               //李四，而是打印return的张三
        console.log(this.$refs["p_ref"].innerHTML);
      });
    },
  },
};
</script>

//运行结果：李四

这篇好文章是转载于：学新通技术网