Vue.js
Vue模板__Vue.js__前端
发布于 3 年前 作者 banyungong 1160 次浏览 来自 分享
粉丝福利 : 关注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-html、v-on、v-bind等指令操作DOM
  • 使用v-if、v-for等指令实现条件判断和循环

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

回到顶部