Vue初探
Posted jiangwei0512
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue初探相关的知识，希望对你有一定的参考价值。
准备
安装VS Code。安装Debugger for Chrome插件。编写配置，放到.vscode目录，名字是launch.json：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open ${file}",
"file": "${file}"
}
]
}
下面的示例都来自https://cn.vuejs.org/。
示例一
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
运行结果（VS Code中安装Chrome插件，配置，按F5执行）：
按F12打开调试台，可以动态修改上述的显示：
另外，这里的<script src="https://unpkg.com/vue"></script>是外部导入的Vue，如果去掉这句，结果就没有什么意义了：
从这里可以看出来Vue的一些东西：Vue挂载标记（用“{{}}”括起来）到DOM元素上，后续在Vue实例上操作标记即可，而不需要再去操作DOM（类似getElementById()），代码中的<div>成了唯一的入口。
示例二
后续没有特殊的情况的话会去掉<html>等不重要的DOM，所以下面的代码并不是完整的，但是实际运行的结果还是完整的：
<body>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
运行结果：
鼠标停留在字符串上时会有额外提示（不过截图的时候显示不出来）。
代码中的v-bind是Vue提供的特殊指令。指令都是由“v-”开头的，它们会在渲染的DOM上应用特殊的响应式行为。这里的v-bind的意思是将title这个属性（attribute）和Vue实例的message这个Property保持一致。
这里“鼠标悬停来显示信息”是title这个属性本身的特定，属于DOM的一部分，如果没有“v-bind:”这样的代码，则悬停之后就打印“message”，而有了v-bind之后，就跟Vue中的message这个Property联系起来了，而不是简单的字符串“message”了。
从这里可以看出来Vue的一些东西：除了“{{}}”标记的内容，特定的字符串也不是简单的字符串而已了，而是会被Vue替换掉，或者替换这个词也不准确，应该说被处理成其它的了。
示例三、四
<body>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
</body>
这里也是一个Vue指令，这次是v-if，其实就是判断seen的值，这里跟上一例一样，“seen”原本是字符串，但是到Vue里面当成变量用了，默认是true，所以会显示“现在你看到我了”这句话，但是通过浏览器的Console可以修改值，改成false，就没有显示了：
v-if是条件判断，其它还有v-for，示例代码：
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 javascript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
</script>
</body>
这里示例更明显了，v-for之后的字符串已经类似foreach里面的语句了，todos像是一个列表或者数组之类的东西（或者JSON？），在Vue实例里面进行了赋值，最终的结果：
从这里可以看出来Vue的一些东西：Vue会在DOM中定义一些入口（目前看到的有“{{}}”和字符串），可以称为“锚”吧，然后在Vue实例中操作这些“锚”，来完成最终的操作。这样的好处应该是显示（DOM）和控制操作基本完全分离了。
示例五
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
这个例子中的DOM部分没有特别的差异，仅仅又学了一个Vue指令v-on:click，不过在Vue实例中，不仅有el和data，还有methods了。目前对这几个值还没有特别的了解，后续应该会深入。
实例六
<body>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
这里是另外的一个Vue指令v-model，它能实现表单输入和应用状态之间的双向绑定。执行结果：
修改输入框中的内容，上面的显示也会实时地改变，但是所谓地双向目前是看不出来。
组件
组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。下面是一个例子：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
var app = new Vue(...)
这里创建了一个名为“todo-item”的组件，它用起来就像一个DOM的元素节点，如下代码所示：
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
下面是一个完整地例子：
<body>
<div id="app-7">
<ol>
<!--
现在我们为每个todo-item提供todo对象
todo对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
</body>
相比前面的组件示例，这里的多了一个props，它是组件的属性，类似于DOM元素节点的属性，本例中属性的名称是todo。目前还看不懂这个代码，比如说为什么有个key？后续应该会有介绍。最终执行的结果：
从这里可以看出来Vue的一些东西：Vue的组件似乎就是自定义的DOM元素节点，方便将网页细分，更易于开发和管理。但相比于DOM元素节点的优势：元素节点是规范，虽然定义了但是也不是所有浏览器都支持；Vue组件相比于DOM元素节点有更多的特定，后面会介绍。
以上是关于Vue初探的主要内容，如果未能解决你的问题，请参考以下文章