一、简单介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
学习此框架你需要掌握关于 HTML、CSS 和 JavaScript 的中级知识。
同时还需要掌握 ES6 的语法知识。
二、简单体验
1. 在一个 HTML 文档中引入vue
方式一
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
方式二
我这里选择的是使用 <script></script> 标签直接引入的方式。
并且是把源码下载到本地。
因为是学习之用，所以选择开发版本
千锋教育云计算
全部复制并保存到本地，名为: vue.js
image.png
2. 从 Hello vue 开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
// 从本地引入 vue
<script src="../static/vue.js"></script>
</head>
<body>
<div id="app">{{ message }} </div>
</body>
<script >
// 创建一个 Vue 实例
var app = new Vue({
// 挂载点
el: '#app',
// 声明数据
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
我们需要在 body 标签中编辑一个 div 标签。
并且给这个标签一个 id 的属性
接着我们编写 js 的代码
new Vue是创建一个 Vue 的对象
el是指定一个元素，用于把 vue 中的数据渲染到这个元素上，并且也会作用到这个标签的所有的子标签。这里使用id这个属性进行绑定。
date指明了需要被渲染的数据。
message是数据的一个变量，这个变量可以写在被绑定的元素上，变量的值就会被渲染到此元素上。
上面的这种直接渲染到方式叫做 声明式渲染
声明式渲染
vue 可以实现 js 代码中的数据和 DOM 中的值实现同步，就是互相作用。
说白了就是，当有一个数据和页面上的一个 DOM 元素有绑定关系后，改变任意一的值都会同步到另一个。
这需要使用 v-bind 指令
例如
HTML
<input type="text" v-bind:value="msg">
JS
<script >
// 创建一个 Vue 实例
var app = new Vue({
// 挂载点
el: '#app',
// 声明数据
data: {
msg: 'hello vue!'
}
});
</script>
页面展示效果
image.png
假设你在 控制台执行如下代码，页面展示的效果也会随之改变
千锋云计算
条件和循环
条件判断
使用 v-if 指令可以解决判断
HTML
<div id="app">
<p v-if="seen">你得到我了</p>
</div>
JS
var app3 = new Vue({
el: '#app',
data: {
seen: true
}
})
可以尝试在控制台编辑如下代码，可以看到内容瞬间消失了。
app.seen = false
image.png
循环
使用 v-for 可以实现对一个列表或者对象都循环
HTML
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
JS
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '学习 Django' },
{ text: '整个牛🐮项目'}
]
}
})
页面展示效果
千锋云计算
同样在控制台中输入如下代码你会发展页面的变化
千锋云计算
绑定事件
使用 v-on 可以进行事件的绑定
HTML
<div id="app">
<p>{{ msg }}</p>
<button v-on:click="reverseMessage">点我逆转未来</button>
</div>
JS
var app = new Vue({
el: '#app',
data: {
msg: '未来'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
双向绑定的特性来获取用户的输入值
使用 v-model 实现数据的双向绑定。
这会使获取到用户输入的值而变得很简单。
HTML
<div id="app">
姓名：
<input type="text" v-model="inpName">
你输入的姓名是：
<span>{{ inpName }}</span>
</div>
JS
var app = new Vue({
el: '#app',
data: {
inpName: ''
}
})
页面渲染效果
image.png
网友评论