Vue学习-邂逅Vue.js
一、邂逅Vue.js
认识vue
为什么学习vue
简单认识一下vue
Vue全家桶：core + vue router + vuex
vue安装方式
-
cdn引入
开发环境
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>生产环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script> -
下载和引入
-
npm安装管理
npm install vue
vue初体验
-
Hello Vue.js
<!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">
<!-- 响应式 -->
<h2>{{ message }}</h2>
<h3>{{ name }}</h3>
</div>
<!-- 并没有vue来管理 -->
<div>
{{ message }}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
// 定义数据
data: {
message: '你好啊，vue!',
name: 'xx'
}
});
</script>
</body>
</html>
-
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">
{{ movies }}
<ul>
<li v-for="item in movies">{{ item }}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue',
movies: ['movie1', 'movie2', 'movie3']
}
});
</script>
</body>
</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">
<h2>current counter: {{ counter }}</h2>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add() {
this.counter++;
},
sub() {
this.counter--;
}
}
})
</script>
</body>
</html>
vue中的MVVM
vue中的mvvm
View: DOM
Model: JS object
ViewModel: Vue实例 DOM Listeners, Data Bindings
