Vue 小結(jié)

jquery 通過$() 選擇器選擇 dom 然后進(jìn)行修改，最后把修改的數(shù)據(jù)渲染到視圖上

vue 可以直接把事件綁定在 dom 上事格，在 dom 的回調(diào)里面修改數(shù)據(jù)模型搞隐，vue 會把數(shù)據(jù)渲染到視圖上

vue 是怎樣實(shí)現(xiàn)數(shù)據(jù)驅(qū)動的采用了 mvvm 設(shè)計(jì)模式

mvvm

第一個 m 是 model 代表數(shù)據(jù)模型驹愚，在前端中數(shù)據(jù)模型一般是一個純的 js 對象
第二個 v 是 view，代表的是視圖劣纲，在前端中視圖一般就代表 html 和 css
第二個 vm 是 viewmodel 是 model 和 view 的橋梁逢捺，其實(shí)就是一個 vue 實(shí)例
數(shù)據(jù)通過數(shù)據(jù)綁定映射到視圖上，視圖通過跟用戶的交互比如點(diǎn)擊事件通過 dom 的回調(diào)來改變數(shù)據(jù)

image.png

vue 的引用

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

數(shù)據(jù)綁定

<!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 實(shí)例的容器
             el: '.app', 
             // 數(shù)據(jù)模型
             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 實(shí)例的容器
    el: '.app', 
    // 數(shù)據(jù)模型
    data: {
       text: '<b> hello wrold </b>',
    }
})

image.png

屬性綁定

v-bind 是綁定屬性后面接參數(shù) 中間用 :隔開绷柒，后面的參數(shù)就是要綁定的屬性名可以簡寫:屬性名="屬性值"

<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 實(shí)例的容器
    el: '.app', 
    // 數(shù)據(jù)模型
    data: {
       text: '<b> hello wrold </b>',
       url:'https:www.qq.com'
    }
})

v-model

實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定

<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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者