MVVM思想
1）字母解释
M：model 数据
V：view 视图
VM(view-model)：数据和视图的控制
2）当页面数据发生变化时,则通过dom监听将数据传给model
当model的数据发生变化时,则通过数据绑定 绑定到页面中
需配置的JS文件
数据展现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-cloak练习</title>
<!-- html样式 -->
<style type="text/css">
/* 为属性定义样式 */
[v-cloak]{
/* 定义样式不显示 */
display: none;
}
</style>
</head>
<body>
<!--
v-cloak说明
当程序编译结束时，v-cloak失去效果，
编译没有结束时，v-cloak的隐藏效果有效
-->
<div id="app" v-cloak>
<h1>v-cloak属性</h1>
<!-- 利用插值表达式，获取数据 -->
<h3>{
{hello}}</h3>
<!-- 1.插值表达式 -->
<h3>{
{hello}}</h3>
<!--
v-text 数据展现
v-text是Vue的指令
当数据没有解析时，页面没有任何数据，是v-cloak的升级版本
-->
<h3 v-text="hello"></h3>
<!--
v-html
将数据按照HTML形式进行解析
有时我们页面的部分数据可能来源于其他的服务器
远程服务器返回的是html代码片段，如果需要将代码片段渲染为页面形式，则使用该命令
-->
<div v-html="html"></div>
<!-- v-pre
说明：跳过这个元素和它的子元素的编译过程。
可以用来显示原始 Mustache 标签。
跳过大量没有指令的节点会加快编译。
需求：需要展现原始的Mustache标签，不需要程序编译
-->
<div v-pre>{
{需要展现原始的数据}}</div>
<!-- v-once 数据只渲染一次 -->
<div v-text="one" v-once></div>
<hr>
<!--
v-model 双向数据绑定
data中的数据发送变化时，页面数据同步更新
当页面input框中的内容发生变化时，则同步更新data数据
-->
<div style="border: aliceblue;">
<h3>双向数据绑定</h3>
用户名：<input type="text" name="name" v-model="name"/>
</div>
</div>
<!-- 2.引入vue.js -->
<script src="../js/vue.js"></script>
<!-- 3.编辑VUE JS -->
<script>
/**
* ES6新规范
* 1.定义变量 var 弊端：没有作用域的概念
* 如果变量名称重复则可能会引发问题
* 2.定义变量 let 有作用域的概念
* 3.常量 const 全局唯一，不可改变
*/
const app = new Vue({
// 标识VUE对象的作用范围
el: "#app",
//定义数据对象
data: {
hello: "HelloVue"
}
})
/**
* ES6新规范
* 1.定义变量 var 弊端：没有作用域的概念
* 如果变量名称重复则可能会引发问题
* 2.定义变量 let 有作用域的概念
* 3.常量 const 全局唯一，不可改变
*/
const app = new Vue({
// 标识VUE对象的作用范围
el: "#app",
//定义数据对象
data: {
hello: "HelloVue",
html: "<h1>好好学习！天天向上</h1>",
one: "java学习",
name: "admin"
}
})
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中事件学习</title>
</head>
<body>
<div id="app">
<h1 v-text="name"></h1>
<!-- 事件绑定 -->
{
{num}}
<button v-on:click="num++">自增1</button>
<!-- 简化操作 -->
<button @click="num--">自减1</button>
<!-- VUE中调用函数方法 -->
<button @click="addNum()">方法自增One</button>
<button @click="addNum2()">方法自增Two</button>
</div>
<script src="../js/vue.js"></script>
<script>
/* el,data,methids vue中固定的属性
左侧的key是Vue中固定的关键字,通过关键字将程序加载到Vue内存中
Vue对象中存储的都是value,
Vue对象: 数据 num: 1.......
*/
const app = new Vue({
el: "#app",
data: {
name: "vue案例",
num: 1,
},
methods: {
//key: value
addNum: function(){
this.num++
},
// 方法的简化操作
//addNum2 = addNum2: function
addNum2(){
// this.num = this.num + 2
this.num += 2
}
}
})
</script>
</body>
</html>
事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件修饰符</title>
</head>
<body>
<div id="app">
<!--
事件的冒泡
如果事件有嵌套关系, 执行完成内部事件之后,
执行外部事件.这种现象称之为事件冒泡.
阻止事件冒泡 .stop
语法：
1.v-on:click.stop = "xx"
[email protected] = xx""
-->
<div @click="addNum2()">
<h3>{
{num}}</h3>
<button @click.stop="addNum()">自增1</button>
</div>
<hr >
<!-- 阻止默认行为
如果需要阻止标签的默认行为
-->
<div>
<h3>阻止默认事件</h3>
<a href="http://www.baidu.com" @click.prevent="baidu()">百度</a>
</div>
<!-- 需求：要求用户按回车触发事件函数
keyup：按键弹起后触发
keydown：按键按下后触发
.enter 回车键
.tab Tab键 为了避免热键冲突，建议配合keydown指令使用
.delete 删除和退格键
.esc Esc键
.space 空格键
.up 上键
.down 下键
.left 键盘左键
.right 键盘右键
-->
<div>
<h3>特殊案件字符说明</h3>
回车键触发：<input type="text" name="username" @keyup.enter="handler()"/>
删除键触发：<input type="text" name="username" @keyup.delete="handler()"/>
Tab键触发：<input type="text" name="username" @keydown.tab="handler()"/>
</div>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
const app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
addNum: function(){
this.num++
},
addNum2(){
this.num += 2
},
baidu(){
console.log("点击百度按钮")
},
handler(){
console.log("函数被调用")
}
}
})
</script>
</body>
</html>
计算器练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器练习</title>
</head>
<body>
<div id="app">
<!-- 要求：输入完B之后，回车键触发计算加法操作 -->
数据A：<input type="text" name="one" v-model="one"/>
数据B：<input type="text" name="two" v-model="two" @keyup.enter="Total()"/>
总数：<span v-text="total">{
{total}}</span>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
one: "",
two: "",
total: 0
},
methods: {
Total(){
//parseInt()函数用来将字符串转换成int类型
this.total = parseInt(this.one)+parseInt(this.two)
}
}
})
</script>
</body>
</html>
属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<!-- 给标签定义样式 -->
<style type="text/css">
.ys1{
color: green;
background-color: aquamarine;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<!-- 入门案例 -->
<a href="http://www.baidu.com">百度</a>
<!-- 属性动态绑定 -->
<a v-bind:href="url">百度-vue</a>
<!-- 简化操作 -->
<a :href="url">百度——vue</a>
<hr >
<h3>样式绑定</h3>
<!-- 需求：控制标签样式是否展现 -->
<div class="ys1">样式</div>
<!-- vue的语法：{ys1类型的名称: boolean类型数据}
{ys1: boolean} ys1标签样式不展现
-->
<div :class="{ys1: flag}">样式</div>
<button @click="flag = !flag">切换</button>
</div>
<!-- 小结：
v-on 事件的处理 函数定义
v-bind 事件的绑定 class style
-->
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
url: "http://www.baidu.com",
flag: true
}
})
</script>
</body>
</html>
分支结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构</title>
</head>
<body>
<div id="app">
<!-- 分支语法说明
1).v-if 如果条件为真，则展现数据
2).v-else 一般与v-if同时出现，v-else不能单独出现
3).v-else-if
4).v-show
-->
<h1>根据分数评级</h1>
用户考试成绩：<input type="text" v-model="score" placeholder="请输入分数"/>
<br>
等级：
<!-- 如果从多个数据中挑选一个时，使用v-if判断 -->
<span v-if="score>=90">优秀</span>
<span v-else-if="score>=80">良好</span>
<span v-else-if="score>=70">中等</span>
<span v-else-if="score>=60">较差</span>
<span v-else>不及格</span>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
score: ""
}
})
</script>
</body>
</html>
循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
</head>
<body>
<body>
<div id="app">
<!-- vue中的循环 -for
1.循环获取数据的内容
2.可以循环复制标签
-->
<h1 v-for="itme in array">{
{itme}}</h1>
<!-- v-for语法2：获取数据/下标 itme 数据 idex 下标 -->
<h1 v-for="(itme,index) in array">{
{itme}}---{
{index}}</h1>
<hr >
<!-- 循环遍历集合信息 -->
<div v-for="(value,key,index) in userlist">
<span v-text="key"></span>
---
<span v-text="value"></span>
<span v-text="index"></span>
</div>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
array: ["安琪拉","孙悟空","薇恩","锤石","女警","打野","中单","AD","辅助"],
userlist: ["安琪拉",{
"愿你不用": "靠","失去": ""},"打野","中单","AD","辅助"]
}
})
</script>
</body>
</html>
表单数据提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单数据</title>
</head>
<body>
<div id="app">
<!-- 定义表单 练习form标签与vue对象形成数据绑定 -->
<form action="http://www.baidu.com">
用户名: <input type="text" v-model="user.username" placeholder="请输入要提交的数据"/>
<br>
用户详情: <textarea v-model="user.info"></textarea>
<br>
<!-- 定义下拉框 -->
<select name="book" v-model="user.book">
<option value ="Java编程基础">Java编程基础</option>
<option value ="Java编程思想">Java编程思想</option>
<option value ="疯狂Java讲义">疯狂Java讲义</option>
<option value ="Java核心卷集">Java核心卷集</option>
</select>
<br>
<!-- 单选框 name名称相同 -->
性别: <input type="radio" name="gender" value="男" v-model="user.gender"/>男
<input type="radio" name="gender" value="女" v-model="user.gender"/>女
<br>
<!-- 复选框 值有多个 用数组接收 -->
爱好: <input type="checkbox" name="box" value="篮球" v-model="user.box"/>篮球
<input type="checkbox" name="box" value="拳击" v-model="user.box"/>拳击
<input type="checkbox" name="box" value="Java" v-model="user.box"/>Java
<input type="checkbox" name="box" value="音乐" v-model="user.box"/>音乐
<!-- 阻止标签的默认行为 采用其他方式提交 -->
<input type="submit" value="提交" @click.prevent="addForm()" />
</form>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
user: {
username: '',
info: '',
book: '',
gender: '',
box: []
}
},
methods: {
addForm(){
console.log("input标签:"+this.user.username+",发起ajax请求")
console.log("文本域标签:"+this.user.info+",发起ajax请求")
console.log("下拉框标签:"+this.user.book+",发起ajax请求")
console.log("单选框标签:"+this.user.gender+",发起ajax请求")
console.log("多选框标签:"+this.user.box+",发起ajax请求")
}
}
})
</script>
</body>
</html>