先做第一个vue程序，来体验一下vue的响应式
代码做了什么事情？
我们来阅读javascript代码，会发现创建了一个vue对象
创建vue对象的时候，传入了一些options:{}
{}中包含了el属性：该属性决定了这个vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的，比如像下面这样
也可能是来自网络，从服务器加载的
第一个vue程序hello world
<div id="app">{{message}}</div>
<script>
//编程范式：声明式编程
var app=new Vue({
el:"#app",//用于挂载要管理的元素,与div的id一一对应
data:{//定义数据
message:"hello world"//数据写在div元素中，包裹在{{}}里
}
})
</script>原生js的做法(编程范式：命令式编程)
1.创建div元素，设置id属性
2.定义一个变量叫message
3.将message变量放在前面的div元素中显示
4.修改message的数据
5.将修改后的数据再次替换到div元素
两个基础指令：
v-if判断：配套的v-else-if、v-else
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
type:'B'
}
})
</script>v-for循环:以列表形式显示
<body>
<div id="app">
<h3>{{message}}</h3>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
const app=new Vue({
el:"#app",
data:{
message:'电影',
movies:['星际穿越','大话西游','盗梦空间','你的名字']
}
})
</script>
</body>练习：
实现一个小的计数器
点击+计数器+1
点击-计数器-1
学习新的指令和属性：
新的属性：methods，该属性用于在Vue对象中定义方法
新的指令：@click/v-on指令，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods中定义的方法）
方法一：直接在页面上写
<div id="app">
<h3>当前计数:{{counter}}</h3>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{//定义数据
counter:0
}
})
</script>方法二：定义方法
<div id="app">
<h3>当前计数:{{counter}}</h3>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script>
const app=new Vue({
el:"#app",
data:{//定义数据
counter:0
},
methods: {//定义方法
add:function(){
this.counter++//不写this会找全局的counter
},
sub:function(){
this.counter--
}
},
})
</script>
1041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
