紫藤花.png
开始接触vue是看的vue1.0的文档，后面发现2.0的也早出来了，就直接开始学习vue2.0了。在实践项目之前，差不多过了两遍的文档，过的很粗糙，效果也不太好。在做项目的过程中遇到了不少问题，又回过头看。文档尤大大写的算是挺详细了，虽然知识点内容不是太多，但是还是挺杂的，动手实际操作是很重要的。趁最近项目完成的机会总结下，在加深下基础理解。
<h3>什么是vue.js?</h3>
vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。
vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
<h3>Vue.js安装</h3>
<h5>1、直接<script>引入</h5>
直接下载并用<script>标签引入，vue会被注册为一个全局变量。
下载地址：http://cn.vuejs.org/v2/guide/installation.html（下载开发版本）
或者直接引用CDN库：
https://unpkg.com/vue
<h5>2、NPM安装</h5>
<pre> npm install vue (也可使用淘宝镜像cnpm下载，具体安装教程自行百度）</pre>
<h5>2、Bower安装</h5>
<pre>
brow install vue
</pre>
<h3>起步vue应用</h3>
接下来创建第一个vue应用，first.html（可直接复制代码，新建html文件测试）
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my first vue page</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el:'#app',
data: {
message:'Hello World!'
}
});
</script>
</body>
</html>
</pre>
<h3>双向数据绑定</h3>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>data</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-2">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app2=new Vue({
el: '#app-2',
data: {
message: '我是黑子呐!'
}
})
</script>
</body>
</html>
以上实例中的{{message}}会根据输入框input的改变而改变，如果你不想让其变化
可以修改为：
{{* message}}
同时还支持一些简单的表达式：
<!--字符串链接-->
{{message + '官方地址：www.baidu.com'}}
<!--字符串反转 -->
{{message.split('').reverse().join('')}}
<h3>条件判断</h3>
<div id="app-3">
<p v-if="show">你可以看到我</p>
</div>
<script>
new Vue({
el: '#app-3',
data: {
show:true
}
})
</script>
image.png
当show:false时，“你会看到我”消失了。
v-show作用与v-if类似，不同的是v-show的元素会始终渲染并保持在DOM中，切v-show不支持<template>标签。
<h2 v-show="ok"> Hi</h2>
</pre>
<h3>列表输出</h3>
<pre>
<div id="app-4">
<ol>
<li v-for="item in items">
{{ item.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
items: [
{ text: '学习html' },
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
]
}
})
</script>
网友评论