Vue
Soc:关注度分离原则
HTML+ CSS + JS: 视图:给用户看,刷新后台给的数据
网络通信:axios
页面跳转:vue-router
状态管理:vuex
Vue-UI:ICE
前端的打包工具:webpack
NPM:项目综合管理工具,类似于 maven
我的第一个 vue 程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{
{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: "hello vue!"
}
});
</script>
</body>
</html>
也可以使用 v-text
、v-bind:
等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒即可查看此处动态绑定的提示信息
</span>
</div>
<div id="app2">
<span v-text="message">
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: "hello vue!"
}
});
var vm2 = new Vue({
el: '#app2',
data: {
message: "我是 app2"
}
});
</script>
</body>
</html>
Vue 基本语法
if-else
html
<div id="app2">
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else>C</h1>
</div>
javascript
var app2 = new Vue({
el: '#app2',
data: {
type: 'A'
}
});
for
html
<div id="app">
<li v-for="item in items">
{
{item.message}}
</li>
</div>
javascript
var app = new Vue({
el: '#app',
data: {
items: [
{
message: 'Java'},
{
message: 'Vue'},
{
message: 'Spring'}
]
}
});
还可以拿到下标
<div id="app">
<li v-for="(item,index) in items">
{
{item.message}}==>{
{index}} <!-- index 为数组下标,也可以不要 -->
</li>
</div>
Vue 绑定事件
html
<div id="app">
<button v-on:click="sayHi">click Me</button>
</div>
javascript
var app = new Vue({
el: '#app',
data: {
message: '学习 Vue 的第二天!'
},
methods: {
// 方法必须定义在 Vue 的 Method 对象中
sayHi: function () {
alert(this.message);
}
}
});
Vue 双向绑定
什么是数据双向绑定?
Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化时候,视图也就会发生变化,当视图发生变化的时候,数据也会跟着同步变化
在表单中使用双向数据绑定
可以用
v-model
指令在表单<input>
,<textarea>
,<select>
元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法更新元素,尽管有些神奇,但 v-model 本质上是负责监听用户的输入事件以更新数据,并对一些极端场景进行特殊处理。
普通表单数据双向绑定
html
<div id="app">
输入的文本:<input type="text" v-model="message">
<p>{
{message}}</p>
</div>
javascript
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
当我们在 input 框中输入数据时,在下方会同步显示数据
单选框数据双向绑定
html
<div id="app2">
性别:
<input type="radio" name="sex" value="男" v-model="sex">男
<input type="radio" name="sex" value="女" v-model="sex">女
<p>
选中了:{
{sex}}
</p>
</div>
javascript
var app2 = new Vue({
el: '#app2',
data: {
sex: ''
}
});
下拉框数据双向绑定
html
<div id="app3">
<select v-model="selected">
<option value="