Vue 小结

jquery 通过$() 选择器选择 dom 然后进行修改，最后把修改的数据渲染到视图上

vue 可以直接把事件绑定在 dom 上，在 dom 的回调里面修改数据模型，vue 会把数据渲染到视图上

vue 是怎样实现数据驱动的采用了 mvvm 设计模式

mvvm

第一个 m 是 model 代表数据模型，在前端中数据模型一般是一个纯的 js 对象
第二个 v 是 view，代表的是视图，在前端中视图一般就代表 html 和 css
第二个 vm 是 viewmodel 是 model 和 view 的桥梁，其实就是一个 vue 实例
数据通过数据绑定映射到视图上，视图通过跟用户的交互比如点击事件通过 dom 的回调来改变数据

image.png

vue 的引用

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
import vue from 'vue'

数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>stduy-vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="app">
        {{ text }}
    </div>
     <script>
         new Vue({   // 记得 V 要大写 
             // vue 实例的容器
             el: '.app', 
             // 数据模型
             data: {
                text: 'hello wrold',
             }
         })
     </script>

文本绑定

image.png

Vue 除了提供 {{}} 在 html 中绑定文本还提供 v-text 和 v-html ，在 vue 中以 v- 开头的叫做指令，通过指令我们可以操作 dom ，注意使用 v-html 容易引起 xss 攻击

<body>
    <div class="app" >
        <p>{{ text }}</p>
        <p v-text="text"></p>
        <p v-html="text"></p>
    </div>
     <script src="./app.js"></script>  
</body>

app.js

new Vue({
    // vue 实例的容器
    el: '.app', 
    // 数据模型
    data: {
       text: '<b> hello wrold </b>',
    }
})

image.png

属性绑定

v-bind 是绑定属性后面接参数中间用 :隔开，后面的参数就是要绑定的属性名可以简写:属性名="属性值"

<body>
    <div class="app" >
        <p>{{ text }}</p>
        <p v-text="text"></p>
        <p v-html="text"></p>
        <a v-bind:href="url">qq</a> // 可以简写 :href="url"
    </div>
     <script src="./app.js"></script>
</body>

app.js

new Vue({
    // vue 实例的容器
    el: '.app', 
    // 数据模型
    data: {
       text: '<b> hello wrold </b>',
       url:'https:www.qq.com'
    }
})

v-model

实现表单输入和应用状态之间的双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

最后编辑于：2019.10.15 22:01:01

周报 第八期

Vue 小结

vue 的引用

数据绑定

文本绑定

属性绑定

v-model

周报第八期