**
新學習新征程，我們一起踏上學習 vue.js的新長征
遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js
… … …
遇見 vue.js --------阿文的vue.js學習筆記(目錄)
關注我，我們一起學習進步，
**
首先我們來做一個例子，需要實作當我們在輸入框中輸入內容之后，我們下面的你好后面也會出現相同的內容:
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//創建一個盒子 放入我們的輸入框和p標簽
<div id="a">
<input type="text" v-model="message"> //v-modle 就是 雙向資料系結
<p>你好 {{message}}</p> // 顯示資料{{ xxx }}
</div>
//引入 vue.js
<script src="vue.js"></script>
//創建 vue 實體
<script type="text/javascript">
var a = new Vue({
//表明是將哪個元素交個vue 管理的
el: "#a", //這里的 el 就是 element 的縮寫 ，代表（元素）；
data: { //這里指我們的資料
message : ""
}
})
</script>
</body>
</html>
知識點 ： （1） v-model ： 雙向資料系結
雙向資料系結的意思就是指我們vue 中的 data 資料將和我們系結的 dom 元素的內容保持一致，當一方放生變化之后另一方也會發生變化
（2） {{xxxx}} ：顯示的資料
將資料寫在兩個大括號內 ，
（3）const vm = new vue ({
})
很多時候我們寫vue 實體的時候會寫成這種格式，
（4）我們的vue.js 遵循 MVVM 模式
MVVM 是 Model-View-ViewModel 的簡寫
M (model) : 模型，指資料物件 （data）
V （view）：視圖，模板頁面
VM (viewModel) ： 視圖模型 （也就是vue 實體）
1、雙大括號運算式
舉例：
執行結果：你可以看到我們的 p標簽里面的{{msg}}表示的是我們下面 data里面 msg 的資料
這里的msg 是文本資訊，但是如果我們的 msg 是超鏈接的話，這樣寫是無法完成執行的，
舉個栗子： 你可以發現這樣寫的話它會將我們的超鏈接理解為文本，而不是一個超鏈接
這個時候就需要另一種寫法了------v-html
2、v-html
舉個栗子：
執行結果：你就可以看到這是一個超鏈接，并且是可以點擊的
3、v-bind 強制資料系結
我們插圖片的時候，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="a">
//必須要添加 這個 v-bind ，不然是不會將二者進行系結，那么圖片也不會顯示出來
<img v-bind:src="imgurl">
</div>
<script>
const vm=new Vue({
el:"#a",
data:{
//這個是去網上隨便復制的一張圖片的地址
imgurl:'http://p5.itc.cn/q_70/images03/20200912/dd4bf25da88e44219ee2ccda312538da.jpeg'
}
})
</script>
</body>
</html>
執行結果：
補充： 當然很多時候 你也可以將前面的 v-bind 省略 只需要在src前面添加一個冒號也可以表示 強制系結資料 ，即寫作 ：src=“”
4、v-on 系結事件監聽
可以理解為系結某種方法（函式）
舉個栗子：這里的點擊按鈕說 和我們下面的 dj 函式系結，相當于一個滑鼠的單擊事件
執行結果：點擊按鈕就會執行我們下面的 dj 方法
當然這里的 v-on:click 也可以寫作 @click 也是一樣的效果
補充： 這里 click 后面系結的 方法如果不傳引數 的話可以不加括號，就直接像上面那個例子那么寫，如果要傳引數的話，就需要加括號，
舉個栗子：
執行結果：可以看出我們這里是有引數的 ，所以我們的上面需要寫括號傳參，
**
Hoping the crowd screams out, screaming your name. Hope if everybody runs, you chose to stay.
------------愿人群聲嘶力竭，呼喊你名；愿眾人慌不擇路，你毅然留下，
**
關注 校園君有話說 公眾號 ，回復 web前端 免費領取50G 前端學習資料 一份 ，我們一起學習進步吧，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/40123.html
標籤：其他