主要内容:
vue基础语法
MVP及MVVM设计模式的介绍
组件的简单使用
一:下载
新建vue项目--用vue实现第一个hello world
<script src="vue.js"></script>
</head>
<body>
<div id="app">{
{content}}</div>
<script>
// var app = document.getElementById("app");
// app.innerHTML='hello world';
// setTimeout(function(){
// app.innerHTML = 'bye hello'
// },2000);
var app = new Vue({
// el表示限制接管的范围区域,表示接管了id为App的元素
el:'#app',
data:{
content:'hello world'
}
});
//两秒以后会变化
setTimeout(function(){
app.$data.content='bye world'
},2000);
用vue实现一个todoList
<div id="app">
<!--v-model:表示数据的双向绑定,当input中的数据发生绑定的时候,data中的inputValue也会发生改变-->
<input type="text" v-model="inputValue"/>
<!--v-on绑定事件:绑定的事件需要定义在vue data的 methods中-->
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!--把list中的每一项都放在item中 list表示data中的list,item表示循环中的每一项的内容-->
<li v-for="item in list">{
{item}}</li>
</ul>
</div>
<script