vue基本语法_go需要常用的语法「建议收藏」

vue基本语法_go需要常用的语法「建议收藏」1、插值表达式{{、、、}}大括号中可以写变量名,对象.属性等,还可以写入js语句2.变量显示在界面上v-text:v-html:两者的区别v-text把内容当纯文本处理,v-html遇到htm

vue基本语法_go需要常用的语法「建议收藏」"

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. n e x t T i c k 箭 头 函 数 : t h i s . nextTick箭头函数: this. nextTickthis.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>

//运行结果:李四


今天的文章vue基本语法_go需要常用的语法「建议收藏」分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/71697.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注