Vue模板__Vue.js__前端
发布于 2 个月前 作者 banyungong 177 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

模板template三种写法

Vue完整版,写在html里

//.html
<div id="app">
    {{n}}
    <button [@click](/user/click)="add">+1</button>
  </div>
  
 //.js 
  new Vue({
  el:'#app',
  data:{n:0},//data可以改成函数
  methods:{
  add(){
      this.n+=1
      }
    }
  })

Vue完整版,写在选项里

//.html
<div id="app">
</div>

//.js
new Vue({
  template:'
      <div>
        {{n}}
        <button [@click](/user/click)="add">+1</button>
      </div>
  ',
  data:{n:0},//data可以改成函数
  methods:{
  add(){
      this.n+=1
      }
    }
  }).$mount('#app')//el的另一种写法
  
  //注意一个细节:div#app会被替代,此时不会再有div#app

Vue非完整版,配合xxx.vue文件

//.vue
<template>//template里面不是html,是xml
<div class="red">
    {{n}}
    <button [@click](/user/click)="add">+1</button>
</div>
    
</template>

<script>
export default {
    data(){//data必须是一个函数,防止被多个组件共用
        return{
            n:0
        }
    },
    methods:{
        add()
        {
            this.n+=1
        }
    }
    
}
</script>

<style scoped>
.red{
    color: red;
}

</style>

//.js
import xxx from './xxx.vue'
console.log(Demo)
new Vue({
  el:'#app',
  render(h) {
    return h(xxx)
  }
  })

XML和HTML区别

  • XML里有闭合标签
//HTML
<input name="username">   / 可加可不加,一般不加
<div></div>    空div

//XML
<input name="username" />   必须加/
<div />     空div,可以自闭合

Vue模板里有哪些语法

展示内容

  1. 表达式{{}}
  • {{ obj.a }} 默认去找data里的obj.a,展示到页面
  • {{ n+1 }} 可以写任何运算,加减乘除(不支持if else)
  • {{ fn(x) }} 可以写函数调用 ,默认去methods里找这个函数
  • 如果值为undefined或null就不显示

{{}} 也等价于 <div v-text="表达式"></div>

  1. HTML内容 假设data.x的值为<strong>hi</strong>

<div v-html="x"></div> 告诉Vue,div的HTML文本是变量x的值,x可以在data里定义 x: "<strong>hi</strong>", 那么页面里就会出现加粗的hi

  1. 就想展示 {{ n }} 我就想让用户看到 {{ n }}

使用<div v-pre>{{ n }}</div>

v-pre 不会对模板进行编译,里边写了什么就展示什么

绑定属性

  1. 绑定src <img v-bind:src="y" /> y 是一个变量,值是一段地址字符串 简写:<img :src="y" />

  2. 绑定对象

<div :style="{border:'1px solid red',width:'50px',height:'50px'}">
    注意这里可以把'50px'写成50
</div>
  1. 绑定事件 <button v-on:click="add">+1</button>点击之后,Vue会运行add()

缩写:<button [@click](/user/click)="add">+1</button> 大部分情况下用缩写

<button [@click](/user/click)="n+=1">+1</button> @click后边可以直接写执行的操作,不支持if else,可以用?:表达式

  1. 条件判断
<div v-if="z>0">z大于0</div>
<div v-else-if="z===0">z等于0</div>
<div v-else>z小于0</div>
  1. 循环 for (value,key) in 对象或数组
<ul>
    <li v-for="(u,index) in users" :key="index">
    //u表示value,即数组中的每一个值,index表示下标。
    //每一个v-for后面必须接一个:key,否则会报错。key默认是index,但是一般不写index,而写u.id等(一般用不会重合的值)
        索引:{{index}},值:{{u.name}}
    </li>
</ul>

<ul>
    <li v-for="(value,name) in obj" :key="name">
        属性名:{{name}},属性值:{{value}}
    </li>
</ul>

坑预警:key="index"有bug

v-for 后边必须加 :key

  1. 显示,隐藏 <div v-show="n%2===0">n是偶数,值为 {{n}}</div>

如果 v-show 后边的表达式为真,就显示这个div文本;为假就隐藏

近似等于 <div :style="{display:n%2===0?'block':'none'}">n是偶数,值为 {{n}}</div>

注意

  • 看得见的元素display不止有block
  • 如table的display为table
  • 如li的display为list-item

指令 Directive

v-html , v-model , v-slot , v-once , v-pre 就是指令,就是以 v- 开头的东西

语法

  • v-指令名:参数=值v-on:click=add
  • 如果值里没有特殊字符,可以不加引号。
  • 有些指令没有参数和值,如 v-pre,v-once
  • 有些指令没有值,如v-on:click.prevent 阻止click的默认事件

补充知识:

<div v-html="x"></div>//声明式编程,这里的x指的是x对应的值
div.innerHTML='x'//命令式编程

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent="onSubmit">...</form>

v-on 的修饰符

常用的:stop、prevent和keypress.enter

  • [@click](/user/click).stop='add'阻止事件传播/冒泡,并且点击后执行add函数

  • [@click](/user/click).prevent='add' 阻止默认动作,并且点击后执行add函数

[@click](/user/click).stop.prevent='add' 同时阻止冒泡和默认动作

.{keyCode | keyAlias} keyCode 是按键码,键盘上的每个按键都有自己的按键码 keyAlias 是按键码的别名

<input @keypress="press" />输入框里如果有键盘按下事件,就执行press函数

press(e) {
    console.log(e);
    if (e.keyCode === 13) {
      console.log("用户打了回车");
    }
}

Vue用一种方法简写,就是按键码修饰符

<input @keypress.13="press" />可以指定按下键盘码是13的按键,才执行相应函数。

但是有时数字很难记,所以有了别名 keyAlias <input @keypress.enter="press" />

v-bind 的修饰符

最重要的:sync

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:this.$emit('update:title', newTitle)this.$emit可以触发事件并传参,this可省略。

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如:

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

$event可以获取this.$emit的参数。

为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符: <text-document v-bind:title.sync="doc.title"></text-document>

简写<text-document :title.sync="doc.title"></text-document>

总结:Vue模板的主要特点有

  • 使用XML语法而不是HTML
  • 使用{{}}插入表达式
  • 使用v-htmlv-onv-bind等指令操作DOM
  • 使用v-ifv-for等指令实现条件判断和循环

    版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 九筒妈妈 原文链接:https://juejin.im/post/6971099422549606408

回到顶部