初识vue.js
2017-10-05 本文已影响124人
Husbin
什么是vue.js
- vue.js是一套构建用户界面的渐进式框架。个人观点，目前大型项目前后端分离已成为趋势，vue采用自底向上增量开发设计，核心库只关注视图层，易于上手，还便于与第三方库或既有项目整合。
学习之前
- 学习框架之前，需掌握html，css，javascript，计算机网络等知识。
起步
- 新手不推荐直接使用
vue-cli。推荐直接新建一个html文件，然后用<script>标签引入Vue。<script src="https://unpkg.com/vue"></script>
声明式渲染
-
vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进dom的系统：
-
<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>My first Vue app</title> <script src="https://unpkg.com/vue"></script> </head> <body> <h3>samlpe1 声明式渲染</h3> <div id="app"> {{ message }} </div> <script> let app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>-
2017-10-05 23-18-54屏幕截图.png
-
浏览器打开输出
Hello Vue！，这便是我们生成的第一个Vue应用！现在数据与DOM已经绑定在一起了，所有元素都是响应式的，按F12打开浏览器的控制台，修改app._data.message，会发现页面会做相应的改变。
2017-10-05 23-18-54屏幕截图.png
-
vue.js指令
- 指令带有前缀
v-，以表示他们是Vue提供的特殊属性，他们会在渲染的DOM上应用特殊的响应式行为。 -
v-bind:属性绑定指令。 -
v-if="bool":条件指令。 -
v-for="elem in Array":循环指令。 -
v-on:该指令可用来绑定一个事件监听器。 -
v-model:表单与应用之间双向绑定指令。
组件化应用构建
-
类似angular的Component，vue也存在类似的组件系统，他允许我们使用小型、独立的可复用的组件构建大型应用。
-
在Vue中注册组件：
Vue.component('todo-item'{ template:'<div>html 模板</div>' })-
注册之后，可直接使用
<todo-item></todo-item>标签使用该组件。
demo
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h3>samlpe1 声明式渲染</h3>
<div id="app">
{{ message }}
</div>
<h3>samlpe2 绑定DOM元素属性</h3>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<h3>samlpe3 条件</h3>
<div id="app-3">
<p v-if="seen">now you can look me</p >
</div>
<h3>samlpe4 循环</h3>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<h3>samlpe5 事件监听</h3>
<div id="app-5">
<p>{{message5}}</p >
<button v-on:click="reverseMessage">逆转信息</button>
</div>
<h3>samlpe6 表单与应用状态双向绑定</h3>
<div id="app-6">
<p>{{message6}}</p >
<input v-model="message6">
</div>
<h3>samlpe7 组件化应用构建</h3>
<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>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
let app2 = new Vue({
el:'#app-2',
data:{
message:'页面加载于 ' + new Date().toLocaleDateString()
}
});
let app3 = new Vue({
el:'#app-3',
data:{
seen:true
}
});
let app4 = new Vue({
el:'#app-4',
data:{
todos:[
{text:'学习javascripts'},
{text:'学习vue'},
{text:'做个项目'}
]
}
});
let app5 = new Vue({
el:'#app-5',
data:{
message5:'hello vue.js'
},
methods:{
reverseMessage: function () {
this.message5 = this.message5.split('').reverse().join('');
}
}
});
let app6 = new Vue({
el:'#app-6',
data:{
message6:'Hello world'
}
});
Vue.component('todo-item' , {
props:['todo'],
template:'<li>{{todo.text}}'
})
let app7 = new Vue({
el:'#app-7',
data:{
groceryList:[
{id:0 , text:'蔬菜'},
{id:1 , text:'奶酪'},
{id:2 , text:'水果'},
]
}
})
</script>
</body>
</html>
参考资料
- 文档！文档！文档！左转vue.js
