hello vue体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 交给实例管理 -->
<div id="app">
{{message}}
</div>
<!-- 没交给实例管理 没有实现双向绑定 所以不显示-->
<div>
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//var会越界 let有作用域,不会越界 const常量
new Vue({
el: '#app', //用于挂载要管理的元素
data() { //定义数据
return {
message: 'hello linskyTu'
}
}
})
//以前js的做法 是命令式编程
//现在vue这种是属于 声明式编程
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: '#app',
data() {
return {
movies: ['a', 'b', 'c']
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
计数器:{{count}}
<button @click="increment">+</button>
<button @click="decrement">-</button>
<!-- v-on:click = @click该指令用于监听某个元素的点击事件,并且指定当发生点击时,指定方法(通常是methods中定义的方法)-->
</div>
</body>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: '#app',
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++; //在实例对象内需要用this表示当前对象中的变量 不加this会去找全局变量
}, decrement() {
this.count--;
}
}
})
</script>
</html>
Vue的MVVM
View层:视图层
在我们前端开发中,通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层:数据层
数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。
VueModel层:视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
当你model有数据需要展示的时候 ViewModel会把数据绑定到View上
当View上面有一些事件/一些操作时 也需要通过ViewModel
vue解析完increment方法后再回调到methods的increment中