Vue初识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue初识</title>
</head>
<body>
<div class="wrapper">
<div class="box1">
<p>box1内容</p>
{{ }}
</div>
<div class="box2">
<p>box2内容</p>
{{ }}
</div>
</div>
<div class="wrapper">
{{ }}
</div>
</body>
<!--使用jq： 导入 => 拿到jq对象 => 利用jq对象操作这个页面 -->
<!--<script src="jq.js"></script>-->
<!--<script>-->
<!--$...-->
<!--</script>-->
<!-- 使用vue：导入 => 创建vue对象 => 挂载到指定页面标签 -->
<script src="js/vue.js"></script>
<script>
// 一个vue对象，控制一个挂载点(内部所有内容)
// new Vue({
// el: '.box1'
// })
//
// new Vue({
// el: '.box2'
// })
// 如果控制整个页面，将页面用一个整体标签包裹，挂载着一个vue对象(不要用body)
new Vue({
el: '.wrapper' // 只能控制检索到的第一个class为wrapper的页面结构
})
// 注： 挂载点(html页面结构)与vue对象一一对应， 规范挂载点使用id来标识
</script>
</html>
Vue 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue对象</title>
</head>
<body>
<!-- 一个被vue对象控制的页面结构就称之为一个 组件 -->
<!-- 组件与空着该组件的vue对象(vue实例)是一一绑定关系(且就是一个东西) -->
<div id="app">
{{ msg }}
{{ info }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
msg: '12345',
info: '上山打老虎'
}
});
// vue对象: ??
// 1.与页面挂载点建立联系: el
// 2.控制挂载点中的数据: data
// 3.控制挂载点中的事件: methods(...)
// console.log(vue);
// 需求: 弹出(打印) msg变量中的内容
console.log(vue.$data.msg);
console.log(vue.msg);
</script>
</html>
Vue文本指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<!-- 插值表达式, 用{{ }}包裹vue的变量, 该变量需要在vue对象中初始化 -->
{{ msg }}
<p>{{ msg }}</p>
<!-- vue指令: 就是标签的全局属性,但是这些属性是以 "v-" 开头 -->
<!--<p v-abc="12345"></p>-->
<!--<p v-def="12345"></p>-->
<!--
v-text
v-html
v-once
插值表达式
-->
<p v-text="txt"></p>
<p v-html="hml"></p>
<p>{{ num + 1 }}</p>
<p>{{ num + "12345" }}</p>
<p>{{ num / 5 }}</p>
<p>{{ num + msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "vue的变量",
txt: "vue的text指令",
hml: "<b>vue的html指令</b>",
num: 1000
}
});
</script>
</html>
Vue 事件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件指令</title>
</head>
<body>
<div id="app">
<!--
事件指令: v-on:事件名 简写 @事件名
-- v-on="事件绑定的变量名"
-- :事件名 来设置事件触发的条件
-- 整体语法: v-on:事件名="事件绑定的变量名"
-- 事件绑定的变量名 由 methods来提供具体的方法实现
-->
<p v-on:click="action1" v-text="msg1"></p>
<p v-on:dblclick="action2" v-text="msg2"></p>
<p @mouseenter="action3" v-text="msg3" style="background: red"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg1: "点击事件",
msg2: "双击事件",
msg3: "鼠标悬浮事件",
},
methods: {
action1: function () {
alert("天楚狂")
},
action2: function () {
alert("地楚狂")
},
action3: function () {
alert("人楚狂")
},
}
});
</script>
</html>
Vue 属性指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性指令</title>
</head>
<body>
<div id="app">
<!--
事件指令: v-bind:属性名 简写 :属性名
-- v-bind="属性绑定的变量名"
-- :属性名 来设置事件触发的条件 (style | class | 自定义属性)
-- 整体语法: v-bind:属性名="属性绑定的变量名"
-- 属性绑定的变量名 由 data来提供具体的方法实现
-->
<!-- 自定义的属性 -->
<p v-bind:owen="tag">{{ msg }}</p>
<!--<a href="/static/article/{{ article.id }}"></a>-->
<a :href="url"></a>
<!--<a :href="'/add_article/' + abc"></a>-->
<a :href="'/static/article/' + aid">前往{{ aid }}篇文章</a>
<button @click="btnClick">获取第100篇文章的id</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "属性指令",
tag: 1,
url: '/static/article/1',
aid: 10
},
methods: {
btnClick: function () {
// this.$data.aid = 100;
this.aid = 100;
}
}
});
</script>
</html>
Vue style属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性指令</title>
</head>
<body>
<div id="app">
<p :style="a"></p>
<p @click="btnClick" :style="{width: '200px', height: h, backgroundColor: 'red'}">变高</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: {
width: '200px',
height: '200px',
// 'background-color': 'red'
backgroundColor: 'red'
},
h: '200px'
},
methods: {
btnClick: function () {
this.h = '300px'
}
}
});
</script>
</html>
Vue class属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class属性</title>
<style>
.red {
width: 200px;
height: 200px;
background: red;
}
.yellow {
width: 100px;
height: 100px;
background: yellow;
}
.orange {
width: 100px;
height: 100px;
background: orange;
}
.y {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<button @click="redAction">变红</button>
<button @click="yellowAction">变黄</button>
<p :class="cname"></p>
<!-- class: {}语法 => abc为类名, def为该类名的值,值可以为true|false, 代表abc是否起作用-->
<!-- {类名: 是否起作用} -->
<p :class="{abc: def}"></p>
<button @click="orangeAction">切换</button>
<p :class="{orange: is_orange}"></p>
<!-- class: []语法 => 多类名 -->
<p :class="[a, b, c]"></p>
<!--整体语法-->
<!-- x和z是变量: x值就是类名, z值决定类名y是否起作用 -->
<p :class="[x, {y: z}]"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
cname: '',
def: false,
is_orange: '',
a: 'aaa',
b: 'bbb',
c: 'ccc',
x: 'red',
z: true
},
methods: {
redAction: function () {
this.cname = 'red'
},
yellowAction: function () {
this.cname = 'yellow'
},
orangeAction: function () {
this.is_orange = !this.is_orange
}
}
});
</script>
</html>
Vue 表单指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单指令</title>
</head>
<body>
<div id="app">
<!-- 表单指令: v-model -->
<!--
文本指令不需要绑定东西: v-text="变量名"
属性指令需要绑定属性: v-bind:属性名="变量名" => :属性名="变量名"
事件指令需要绑定事件: v-on:事件名="变量名" => @事件名="变量名"
表单指令需要绑定表单元素的value: v-model:value="变量名" => 只对value进行绑定,
-- 所以直接书写 v-model="变量名"
-->
<input type="text" value="初始value" v-model="msg">
<input type="text" value="初始value" v-model="msg">
<p>{{ msg }}</p>
<!--有v-once的标签，内容一段渲染，就不能再改变-->
<p v-once>{{ info }}{{ msg }}</p>
-------------------------------------------------------------------------------------
<!-- v-model针对于表单元素 -->
<form action="" method="get">
<!-- 1、双向绑定：服务于文本输入框 -->
<!-- v-model存储的值为输入框的value值 -->
<div>
<input type="text" name="usr" v-model="in_val">
<input type="password" name="ps" v-model="in_val" >
<textarea name="info" v-model="in_val"></textarea>
</div>
<!-- 2、单选框 -->
<div>
<!-- 单选框是以name进行分组，同组中只能发生单选 -->
<!-- v-model存储的值为单选框的value值 -->
男：<input type="radio" name="sex" value="male" v-model="ra_val">
女：<input type="radio" name="sex" value="female" v-model="ra_val">
<p>{{ ra_val }}</p>
</div>
<!-- 3、单一复选框 -->
<!-- v-model存储的值为true|false -->
<!-- 或者为自定义替换的值 -->
<div>
<input name="sure" type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
{{ sin_val }}
</div>
<!-- 4、多复选框 -->
<!-- v-model存储的值为存储值多复选框value的数组 -->
<div>
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
{{ more_val }}
</div>
<input type="submit" value="提交">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: "一次性数据",
msg: "改变后的value",
in_val: '',
// 默认值可以决定单选框默认选项
ra_val: 'male',
// 默认值为true，单一复选框为选中，反之false为不选中
sin_val: '',
// 数组中存在的值对应的复选框默认为选中状态
more_val: ['喜好女的','不挑']
},
methods: {}
});
</script>
</html>
Vue 插值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值表达式符号</title>
</head>
<body>
<div id="app">
<p>{{{ msg }}}</p>
<p>{{{ msg ]]]</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
delimiters: ['{{{', ']]]']
});
</script>
</html>
Vue computed计算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed</title>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="firstName">
</p>
<p>
<input type="text" v-model="lastName">
</p>
<input type="text" v-model="aaa">
<!--姓名 = firstName + " " + lastName-->
<h2>{{ firstName + " " + lastName }}</h2>
<!-- 将姓名替换为 firstName + " " + lastName -->
<!--<h2>{{ fullName() }}</h2>-->
<h2>{{ fullName }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
aaa: '',
firstName: '',
lastName: '',
// fullName: '姓名'
},
// methods: {
// fullName: function () {
// return this.firstName + " " + this.lastName
// }
// }
// 一个属性变量的值依赖于多个属性变量的值
// 特殊点: data绑定的属性值是固定的, computed绑定的属性值是动态的(函数的返回值)
computed: {
fullName: function () {
this.aaa;
console.log("监听到内部拥有的变量在改变");
if (this.firstName || this.lastName) {
return this.firstName + " " + this.lastName
}
return "姓名"
}
}
});
</script>
</html>
Vue watch监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>watch</title>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="fullName">
</p>
<p>
<input type="text" v-model="firstName">
</p>
<p>
<input type="text" v-model="lastName">
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
fullName: "",
firstName: "",
lastName: "",
},
// computed: {
// fullName: function() {
// return ""
// }
// },
watch: {
// 为fullName该属性绑定了一个监听事件
// fullName的定义还是在data或computed
// fullName属性值一旦改变，绑定的监听事件就会被调用执行
// 多个变量依赖于一个变量
fullName: function () {
console.log("该方法被调用了");
f_l_arr = this.fullName.split(" ");
this.firstName = f_l_arr[0];
this.lastName = f_l_arr[1];
}
}
});
</script>
</html>
Vue 条件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件指令</title>
<style>
p {
width: 200px;
height: 200px;
background: orange;
}
[v-cloak] { display: none; }
div {
width: 400px;
height: 100px;
}
.red { background-color: red; }
.yellow { background-color: yellow; }
.green { background-color: green; }
</style>
</head>
<body>
<div id="app" v-cloak>
<!--
条件指令：
v-if
v-show
-->
<button @click="btnClick">切换</button>
<!-- v-if在消失的时候,不会被渲染, 而v-show以display: none;进行渲染 -->
<p v-if="is_open"></p>
<p v-show="is_open"></p>
<hr>
<!-- 事件绑定函数, 可以加括号(), 一旦加()就代表要传入参数, 系统就不再传入事件参数 -->
<!--如果想传入事件参数, 1:不加括号 2.加括号需用$event-->
<button @click="changeColor('red', $event)">红</button>
<button @click="changeColor('yellow')">黄</button>
<button @click="changeColor('green')">绿</button>
<div class="red" v-if="color == 'red'">红体</div>
<div class="yellow" v-else-if="color == 'yellow'">黄体</div>
<div class="green" v-else>绿体</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_open: 0,
color: 'red'
},
methods: {
btnClick: function () {
this.is_open = !this.is_open;
},
// a1: function () {
// this.color = 'red'
// },
// a2: function () {
// this.color = 'yellow'
// }
changeColor: function (color, ev) {
console.log(color);
console.log(ev);
// this.color = color;
}
}
});
</script>
</html>
Vue 循环指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环指令</title>
</head>
<body>
<div id="app">
<!--
循环指令：v-for="obj in objs"
-->
<h3>{{ list[4] }}</h3>
<h3>{{ dic['gender'] }} {{ dic.gender }}</h3>
<hr>
<!--遍历数组-->
<!--<p v-for="cless in list">-->
<!--<span>-->
<!--<b>{{ cless }}</b>-->
<!--</span>-->
<!--</p>-->
<p v-for="(cless, index) in list">
<span>
<b>{{ index }} : {{ cless }}</b>
</span>
</p>
<!--遍历对象(字典)-->
<p v-for="(value, key, index) in dic">
<span>
<b>{{ index }} - 【{{ key }}】：{{ value }}</b>
</span>
</p>
<!--复杂结构-->
<!--name:Owen age:8-->
<!--name:Egon age:58-->
<!--name:Hou age:7-->
<p v-for="person in pArr">
<span v-for="(v, k) in person" style="margin-right: 30px">
<b>{{ k }}</b> : <i>{{ v }}</i>
</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: ["语文", "数学", "英语", "编程", "吹牛逼"],
dic: {
name: 'Bob',
age: 18,
gender: '哇塞',
},
pArr: [
{
name: "Owen",
age: "8",
},
{
name: "Egon",
age: "58",
},
{
name: "Hou",
age: "7",
},
]
},
});
</script>
</html>
Vue todolist案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist案例</title>
<style>
span {
background: green;
padding: 5px;
color: red;
margin-right: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="txt">
<button @click="addMsg">留言</button>
</p>
<ul>
<!--<li><span>x</span>第二条</li>-->
<!--<li>第一条</li>-->
<li v-for="(msg, index) in msgs">
<span @click="deleteMsg(index)">x</span>
{{ msg }}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
txt: '',
msgs: []
},
methods: {
addMsg: function () {
var txt = this.txt;
if (txt) {
// unshift shift push pop
// this.msgs.push(txt);
this.msgs.unshift(txt);
this.txt = '';
}
},
deleteMsg: function (index) {
this.msgs.splice(index, 1)
}
}
});
</script>
</html>
Vue 基础总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>总结</title>
</head>
<body>
<div id="app">
<p @click="btnClick">12345</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.实例
// vue == new Vue() == 页面中的挂载点#app == 在new Vue()中所有方法中出现的this
// 实例的成员(eg: el|data|methods), 要通过实例来访问: vue.$el | vue.data | vue.$event
var vue = new Vue({
el: '#app',
data: {
msg: '12345'
},
methods: {
btnClick: function () {
alert(vue.msg)
}
}
});
// 2.实例成员
// el: 挂载点
// data: 属性数据
// methods: 方法
// computed: 计算属性
// watch: 监听属性
// 3.指令
// 文本指令: {{ msg }} | v-text="msg" | v-html="msg" | v-once {{ msg }}
// 事件指令: v-on:click='btnClick' | @click='btnClick' | @click='btnClick($event, 自定义参数们)'
// 属性指令:
// -- v-bind:href=""
// -- :class='[c1, c2]' | :class='{active: true|false}' | :class='[c1, {active: true|false}]'
// -- :style='my_style(就是css格式的字典)' | :style='{width: w; height: h}'
// 表单指令: v-model="" 注:绑定的就是表单元素的value
// 条件指令: v-show | v-if v-else-if v-else
// 循环指令: v-for="(ele, index) in eleArr" | v-for="(v, k, i) in dic"
</script>
</html>
