前言
今天刚到了一本书《Vue.js 项目实战》, 为了提高自己的技术水平，想要有空就把书上的内容看一遍，再亲自写一遍，顺便写个文章作为自己的学习记录。
第一个 vue 应用 vue.js 的下载地址：vue 官网下载
新建一个 html，创建一个 vue 应用
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<!– 将库添加到这里 –>
<script src=”../vue/vue.js” type=”text/javascript”></script>
</head>
<body>
<div id=”root”>
Is this an hello world?
</div>
<script>
// 会输出 vue 的版本
console.log(‘We are using Vue version ‘ + Vue.version)
</script>
</body>
</html>
强烈推荐大家安装 vue.js devtools 插件，调试代码非常有帮助。
创建 vue 实例
// 创建 vue 实例
let vm = new Vue({
// 给实例起名字
name: ‘myApp’,
// 根 DOM 元素的 CSS 选择器
el: ‘#root’,
data() {
return {
message: ‘Hello Vue.js’
}
}
})
new 调用了 vue 的构造器创建了一个实例，构造器中有一个参数——option 对象。该对象可以携带多个属性。name 是给该实例起一个名字，未来可能会有多个实例，便于区分。el 是元素的选择器，表示该实例会在这个元素上进行 vue 的操作。data 是保存当前的数据
v-model 的使用
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<!– 将库添加到这里 –>
<script src=”../vue/vue.js” type=”text/javascript”></script>
</head>
<body>
<div id=”root”>
<p>{{message}}</p>
<input v-model=”message”/>
</div>
<script>
// 创建 vue 实例
let vm = new Vue({
// 给实例起名字
name: ‘myApp’,
// 根 DOM 元素的 CSS 选择器
el: ‘#root’,
data() {
return {
message: ‘Hello Vue.js’
}
}
})
</script>
</body>
</html>
vue 的 {{}} 可以运行 javascript 表达式，并且最后显示结果效果如下图：
可以看到 p 标签的内容随着 input 的值的变化而变化调试工具也能清楚地看到 message 值的变化
第一章结束。