template的三种写法

Vue完整版，写在HTML里面

<div id=xxx>
    {{n}}
    <button @click="add">+1</button>
</div>
new Vue({
    el:#XXX,
    data:{n:0}, // data可以改成函数
    methods: {add(){}}
})

Vue完整版，写在选项里面

<div id=app>
</div>
new Vue({
template:`
    <div>
        {{n}}
        <button @click=" add">+1< /button>
    </div>`,
    data:{n:0}, // data 可以改成函数
    methods:{add(){ this.n += 1 } }
}).$mount('#app')

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

<template>
    <div>
          {{n}}
        <button @click= "add">
          +1
        </button>
    </div>
</template>
<script> 
export default {
    data(){ return {n:0} }，
    //data必须为函数
    methods:{add(){ this.n += 1 }}
}
</script>
<style>这里写CSS </style>

展示内容

表达式

{{ object.a }} 表达式

{{n+1}} 可以写任何运算

{{ fn(n) }}可以调用函数

如果值为undefined 或null 就不显示

另一中写法为<div v-text="表达式" ></div>

HTML内容

假设data. x值为<strong>hi</strong>

<div v- html="x" ></div>即可显示粗体的hi

我就想展示{{n}}

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

v-pre不会对模板进行编译

绑定属性

绑定src

<img v-bind:src="x">

v-bind的简写：

<img :src="x">

绑定对象

<div
:style="{border: '1px solid red',height:100}">
 注意这里可以把'100px' 写成100
</div>

绑定事件

v-on:事件名

<button v-on:click=add" >+1</button>
点击之后，Vue会运行add 执行函数
<button v-on:click="xxx(1) ”>XXX</button>
点击之后，Vue会运行xxx(1)  执行函数名加参数  不推荐这样写
<button v-on:click="n+=1" >XXX< / button>
点击之后，Vue会运行n+=1  执行语句
即发现函数就加括号调用之，否则就直接运行代码
这导致一个问题，如果xxx(1)返回一个函数咋办
用一个中间量赋值  const x = xxx(1)

缩写

< button @click= "add">+1< / button>

判断条件

if…else

<divv-if="x > 0">
    x大于0
</div>
<div v-else-if="x === 0"> 
    X为0
</div>
<div v-else>
    x小于0
</div>

for(value,key)in 对象或数组

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

注意：如果用了 v-for 一定要在后面都加 :key="index"

v-show(显示和隐藏)

// v-show
<div v-show="n%2===0"> n是偶数</div> 
//近似等于
<div :style= "{ display:n%2===0?'block': 'none'}
    n是偶数
</div>
但你要注意,看得见的元素display不只有block
如table的display为table
如li的display为list-item

Vue模板主要特点有

• 使用XML语法(不是HTML)
• 使用{{}} 插入表达式
• 使用 v-html v-on v-bind 等指令操作DOM
• 使用 v-if v-for 等指令实现条件判断和循环

指令 Directive

以 v- 开头的东西就是指令

语法

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

修饰符

用来修饰指令的

有些指令支持修饰符

@click.stop="add" 表示阻止事件传播/冒泡

@click.prevent="add" 表示阻止默认动作

@click.stop.prevent=" add" 同时表示两种意思

常见修饰符

v-on支持的有.{keycode I keyAlias}

. stop .prevent .capture .self .once .passive .native

快捷键相关

.ctrl .alt .shift .meta .exact

鼠标相关

.left .right .middle

v-bind支持的有

.prop .camel .sync

v-model支持的有

.lazy .number .trim

.sync 修饰符

官方文档

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

我们写一个案例：

在App.vue里面写入

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total"/>
    // 等价于
    // <Child :money="total" v-on:update:money="total = Sevent"/>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>
<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

然后创建一个child.vue文件 写入：

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>
<script>
export default {
  props: ["money"]
};
</script>
<style>
.child {
  border: 3px solid green;
}
</style>

最后用main.js去运行它。

控制台会出现如下界面：

然后就会发现 当我么点击花钱。我们不是在本身自己拿的，而是在total那里取出来的。

注意:带有 .sync 修饰符的 v-bind 不能和表达式一起使用

(例如 v-bind:title.sync="doc.title + '!'" 是无效的)。