Vue第一天學習總結
1、環境引入
目前簡單的學習語法階段只引入一個vue.js就可以了，引入方式和正常的js文件引入沒有區別
<script src="lib/vue.js"></script>
2、開始使用
vue中是MVVM渲染方式，M就是Model數據，V就是view頁面，VM就是viewModel，相當於控制器，控制M和V的交互。引入Vue.js後全局對象中就會出現一個Vue對象，實例化一個vue實際上就是實例化了一個vm，指定相應的元素和數據即可實現頁面渲染。
var vm = new Vue({
el:'#綁定的元素id',
data:{
msg:'這裏是一條數據，數據名叫msg'
},
methods:{
方法名(){
//這裏是一個方法，比如onclick的事件觸發的方法等等，此種寫法採用ES6的寫法，也可以通過箭頭函數來繼承this指針。
}
}
})
3、幾種用法
- v-cloak:防止閃屏，當數據沒有被渲染時可以按照v-cloak規定的樣式隱藏等等，數據渲染後該屬性對應樣式消失
- {{}}:插值表達式，可以通過插值表達式來直接給元素渲染數據
- v-text:和thymeleaf中的th:text類似，功能和插值表達式相同，可以理解成th:text和[[${}]]的區別
- v-html:和thymeleaf中的th:utext類似，可以將內容以html的方式顯示
- v-bind:綁定元素的屬性，類似th:的功效，可以省略成一個冒號
- v-on:綁定元素的事件，可以省略成一個@符號
- v-model:形成數據的雙向綁定，但是隻作用在表單元素中
4、案例代碼
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的第一個vue頁面</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--
v-cloak可以解決閃爍問題，使用v-cloak後，當msg沒有渲染完成時，會按照我們指定的樣式（display：none）
顯示，渲染完成後v-cloak消失
-->
<div id="myApp">
<p v-cloak>{{msg}}</p>
<p v-text="msg"></p>
<!--
默認v-text沒有閃爍問題
-->
<p v-html="htmlmsg"></p>
<input type="button" value="綁定title的按鈕" v-bind:title="mytitle+'v-bind內容是個表達式哦'">
<input type="button" value="綁定title且簡寫v-bind的按鈕" :title="mytitle+'v-bind簡寫'" @click="show">
<input type="text" v-model="msg">
</div>
<script src="lib/vue.js"></script>
</body>
<script>
var vm = new Vue({
el: '#myApp',
data:{
msg:'劉凡的第一個vue實例',
htmlmsg:'<h1>劉凡的h1</h1>',
mytitle:'劉凡的標題'
},
methods: {
show:()=>{
alert("hello");
}
}
})
</script>
</html>
5、效果截圖
