Vue

• 什么是 vue
• vue 的两个特征
• vue 指令
• • • • 1. 内容渲染指令
      • 2. 属性绑定指令
      • 3.事件绑定
      • 4. v-model 指令

什么是 vue

Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue 的两个特征

1.数据驱动视图。2.双向数据绑定

vue 指令

1. 内容渲染指令

1. v-text指令的缺点：会覆盖元素内部原有的内容!
2. {{}}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
3. v-html指令的作用：可以把带有标签的字符串，渲染成真正的HTML内容!

2. 属性绑定指令

注意:插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中!

• 在vue中，可以使用v-bind:指令，为元素的属性动态绑定值；
• 简写是英文的:
• 在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如:

<div :title="'box' + index">这是一个div</div>

3.事件绑定

1. v-on:简写是@
2. 语法格式为:

<div id="app">
        <p>count 的值是：{{count}}</p>
        <button @click="add">+1</button>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<!-- 创建vue的实例对象 -->
<script>
    const vm = new Vue({
        // el属性固定写法
        el:'#app',
        // data就是页面要渲染的数据
        data: {
            count :0
        },
        methods: {
            add() {
                this.count += 1;
            }
        }
    })
</script>

3. $event的应用场景:如果默认的事件对象e被覆盖了，则可以手动传递一个$event。例如:

<div id="app">
        <p>count 的值是：{{count}}</p>
        <button @click="add(3,$event)">+3</button>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el:'#app',
        data: {
            count :0
        },
        methods: {
            add(n,e) {
                this.count += n;
            }
        }
    })
</script>

4. 事件修饰符:

• .prevent 阻止链接默认跳转

<a @click.prevent="xxx">链接</a>

• .stop 阻止冒泡

<button @click.stop="xxx">链接</button>

4. v-model 指令

数据双向绑定指令，一般用户表单数据提交，如input，textarea，select 等

<div id="app">
        <p>用户的名字是 ： {{username}}</p>
        <!-- v-model 双向绑定 -->
        <input type="text" v-model="username">
        <!-- v-bind 单向绑定 -->
        <input type="text" :value="username">
    </div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        // el属性固定写法
        el:'#app',
        // data就是页面要渲染的数据
        data: {
            username:"文涛"
        }
    })
</script>