前言
今天刚到了一本书《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值的变化
第一章结束。
