Vue介绍、指令基础、TodoList
(一)、Vue介绍
(1)、网址
vuejs官网:https://cn.vuejs.org
vuejs官方论坛:https://forum.vuejs.org
(2)、特点:
vue不支持IE8及以下版本
vue发展迅速,Nuxt框架能够帮我们快速实现Vue的服务器渲染,Weex框架使用Vue的语法,能够编写原生APP。
Vue五大特点:1.应用范围广 2.生态环境好 3.代码轻量 4.上手简单 5.发展迅速
(3)、基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="root">
<div :style="styleObj" @click="handleBtnClick">
Hello World
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#root',
data: {
styleObj:{
color: "red"
}
},
methods: {
handleBtnClick: function(){
alert('我被点击了');
}
}
})
</script>
</body>
</html>
(4)、与原生JS的对比
原生JS的写法
<body>
<div id="root"></div>
<script type="text/javascript">
var root = document.getElementById('root');
root.innerHTML = '比利时 3:2 日本';
</script>
</body>
VueJS的写法
mustache语法 胡子{{message}},也叫插值表达式
<body>
<div id="root">{{message}}</div>
<script type="text/javascript">
var vm = new Vue({
el: '#root',
data:{
message: '比利时 3:2 日本'
}
})
</script>
</body>
2s之后改变内容
原生JS写法
<body>
<div id="root"></div>
<script type="text/javascript">
var root = document.getElementById('root');
root.innerHTML = '这是2014年世界杯';
setTimeout(function(){
root.innerHTML = '杯界世年4102是这';
}, 2000)
</script>
</body>
VueJS写法
<body>
<div id="root">{{ message }}</div>
<script type="text/javascript">
var vm = new Vue({
el: '#root',
data: {
message: '这是2014年世界杯'
}
})
setTimeout(function(){
vm.$data.message = '杯界世年4102是这';
},2000);
</script>
</body>
(二)、指令基础
(1)、v-for指令:循环数组
<li v-for="item in list">{{ item }}</li>
(2)、v-on指令: 绑定事件
<button v-on:click="handleBtnClick">提交</button>
(3)、v-model: 双向绑定
<input v-model="inputValue" type="text" />
(三)、todolist
<body>
<div id="root">
<input v-model="inputValue" type="text" />
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleBtnClick: function(){
this.list.push(this.inputValue);
}
}
})
</script>
</body>
</html>