一丶vue是什么
其实就是一套渐进式框架,与其他框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层.Vue完全有能力采用单文件组件和Vue生态系统支持的库开发复杂单页应用.
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
二丶Vue安装
0.node.js
1.下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
2.CDN: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
注意:把vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。
3.NPM:$ npm install vue
三丶Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个示例</title>
</head>
<body>
<!--导入vue-->
<script src="vue.js">
</script>
<div id="app">
<!--渲染语法-->
<p>{{ message }}</p>
</div>
<!--js核心-->
<script>
new Vue({
el: "#app",
data:{
message: "Hello Vue.js!"
}
})
</script>
</body>
</html>
页面显示:Hello Vue.js!
四丶声明式渲染
1.插入文本
Vue.js的核心就是用模板语法声明式的将数据渲染进DOM系统
<div id="app">
<!--渲染语法-->
<p>{{ message }}</p>
</div>
<!--js核心-->
<script>
new Vue({
el: "#app",
data:{
message: "Hello Vue.js!"
}
})
</script>
2.绑定属性
除了插入文本,我们还可以绑定元素属性
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟来看此处绑定的提示信息!
</span>
</div>
<script>
var app2 = new Vue({
el:"#app-2",
data:{
message:"页面加载于" + new Date().toLocaleDateString()
}
})
</script>
v-bind被称为指令,指令带有前缀v-
页面显示
五丶条件与循环
1.条件:控制和切换
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el:"#app-3",
data:{
seen:true
}
})
</script>
true结果现在你看到我了
false结果为页面为空
2.循环:渲染列表
<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>
在页面循环出列表
页面显示
六丶处理用户输入
v-on
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
v-model
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
七丶组件化应用构建
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
现在你可以用它构建另一个组件模板
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>