vue初体验
1.vue初体验
npm i vue --save
<body>
<div id="app">
<--插值是Vue用来实现使用数据绑定的一种方式
文本插值:直接输出与键名匹配的键值
-->
<p>{{message}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//1.创建一个vue实例, ViewModel连接着View和Model
var vm = new Vue({
el:'#app', //把ViewModel实例挂载到#app上
data:{ //vue的model
message:'hello, Vue!'
}
})
</script>
- 在上面代码中，我们通过new Vue()构建了一个Vue的实例。在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如：挂载元素（el）和数据（data），我们可以操纵数据改变视图。
el表示Vue要操作哪一个元素下面的区域，比如：#app则表示操作id为app的元素下面的区域；提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
data表示Vue实例的数据对象，data的属性能够响应数据的变化；每个 Vue 实例都会代理其 data 对象里所有的属性。
- Model就是data变量，ViewModel就是这里的new Vue()得到的对象。
2.Vue中双向数据绑定
- MVVM模式其自身是实现了数据的双向绑定的，在Vue.js中我们可以通过指令
v-model来实现数据双向绑定。 - 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
</head>
<body>
<!--View视图-->
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 数据
var myData = {
message: '今天sk不是一般666!'
}
// ViewModal
var app = new Vue({
el: '#app',
data: myData
})
</script>
</html>
- 运行结果：
vueb1.png
vueb2.png
- 新东西
v-model，在Vue中这被称为指令，指令带有前缀v-表示它们是Vue.js提供的特殊属性。它们会在渲染过的DOM上应用特殊的响应式行为。当然，我们就把这指令当做是特殊的HTML特性(attribute)。
