vue简介
官方定义: 渐进式 javascript框架 ====> 简化页面中js操作 通俗定义: js框架 用来简化页面dom操作,通过使用vue实现页面中复杂功能从而不需要频繁操作dom甚至不需要操作任何dom vue 框架 前后端分离基础
特性: MVVM 双向绑定机制 Model数据变化 <----> 视图View
vue优缺点
其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。
Vue.js的特性如下:
1.轻量级的框架(相对而言)
2.双向数据绑定
3.指令
4.插件化
优点:
-
简单:官方文档很清晰,比 Angular 简单易学。(国内框架,demo,文档多)
-
快速:异步批处理方式更新 DOM。(同时进行)
-
组合:用解耦的、可复用的组件组合你的应用程序。(功能由不同的单个功能组件构成)
-
紧凑:~18kb min+gzip,且无依赖。 :表达式 & 无需声明依赖的可推导属性 (computed properties)。
-
对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。
-
-
-
-
缺点:
-
新生儿:Vue.js是一个新的项目,没有angular那么成熟。
-
影响度不是很大、 不支持IE8。
-
无成名库
-
-
v-text、v-html指令使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h1>{{msg}} hello {{msg}} 小陈 {{msg}}</h1>
<h1 >小陈 <span v-text="msg"></span></h1>
<h1 v-html="msg"></h1>
<span v-text="content"></span> <br>
<span v-html="content"></span>
</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",//指定vue实例作用范围
data:{ //用来给vue实例绑定数据
msg:"hello vue",
content:"<a href='http://www.baidu'>点我查看详细</a>"
}
})
</script>
v-text和v-html作用: 用来获取vue实例中data属性声明数据
使用语法: 在哪个标签上获取直接在哪个标签上定义v-text v-html 在v-text="属性名"
{{}} 取值 和 v-text 取值区别: 1.{{}}取值不会将标签原始数据清空 使用v-text取值清空标签原始数据 {{}}===>这种方式取值 插值表达式 2.{{}}取值存在插值闪烁 v-text v-html取值 不存在插值闪烁
推荐: 两种方式都可以使用 {{}} 更加灵活
v-text (innerText)、v-html (innerHtml)区别:
v-on指令基本使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<button v-on:click="test">vue中事件绑定</button>
</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",//用来指定vue实例作用范围
data:{ //用来给vue实例绑定数据
msg:"hello vue"
},
methods:{ //用来vue实例绑定一些列函数 方法
test : function(){ //定义一个test函数
alert('vue中test');
}
}
});
</script>
js中事件(event): 事件三要素:
事件源: 发生特定动作html标签 事件: 发生特定动作事件 单击事件 onclick ondblclick onmouseover onmouseout keyup keydown .....
监听器: 事件处理程序 一般在js中是事件处理函数 function(){}
v-on 指令: 作用: 用来给页面中标签绑定事件用的 语法: 在对应标签上使用v-on:事件名="事件处理函数名"
v-if、v-show指令的使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h2 name="if" v-if="isShow">{{msg}}</h2>
<h2 name="show" v-show="isShow">{{msg}}</h2>
</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",//代表vue实例作用范围
data:{ //用来vue实例绑定数据
msg:"hello vue",
isShow:true
},
methods: { //用来给vue实例定义一些列的相关方法
}
});
</script>
v-if 、v-show指令作用: 用来通过vue方式控制页面中哪些标签展示和隐藏
语法: 控制那个标签显示隐藏直接在那个标签上 加入v-if="true|false|逻辑运算表达式" v-show="true|false"
区别: 1.v-if 底层通过控制dom树上元素节点实现 页面标签展示和隐藏 dom树 2.v-show 底层通过控制标签css中display属性实现标签展示和隐藏 css样式
使用总结: 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好变化快 用v-show 变化慢 v-if
v-for指令使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3/1999/xhtml" xmlns:v-bind="http://www.w3/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h3>遍历对象</h3>
<span v-for="value,key,index in user"> [{{index}} {{key}} {{value}}] </span>
<h3>遍历数组</h3>
<ul>
<li v-for="item,index in schools">{{index+1}}--- {{item}}</li>
</ul>
<h4>遍历数组里面对象</h4>
<table border="1" width="100%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>工资</th>
<th>简介</th>
<th>操作</th>
</tr>
<tr v-for="user,index in users" :key="user.id" >
<td>{{user.id}}</td>
<td v-text="user.name"></td>
<td v-html="user.age"></td>
<td>{{user.salary}}</td>
<td>{{user.content}}</td>
<td><a href="">删除</a><a href="">修改</a></td>
</tr>
</table>
</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",//代表vue实例作用范围
data:{ //用来vue实例绑定数据
msg:"hello vue",
user:{id:21,name:"xiaochen",age:23,salary:23000.23},//定义一个对象
schools:["河南校区","北京校区","天津校区"],
users:[
{id:21,name:"xiaochen",age:23,salary:23000.23,content:"xiaochen是好人"},
{id:22,name:"xiaoming",age:23,salary:23000.23,content:"xiaoming是一个好奥特曼"},
{id:23,name:"xiaosan",age:23,salary:23000.23,content:"xiaosan是一个好姑娘"},
]
},
methods: { //用来给vue实例定义一些列的相关方法
}
});
</script>
v-for指令作用: 用来在页面中实现vue中定义数据的遍历 语法: 直接在对应标签上加入v-for指令 a.遍历对象: v-for="value,key,index in data中变量名" b.遍历数组: v-for="item(普通类型元素),index in data中变量名" c.遍历数组对象: v-for="item(对象),index in data中变量名" 注意: 在使用v-for 建议尽可能在使用 v-for 时提供 key attribute key属性唯一
v-model指令使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3/1999/xhtml" xmlns:v-bind="http://www.w3/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="msg">
</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",//代表vue实例作用范围
data:{ //用来vue实例绑定数据
msg:"hello vue111",
},
methods: { //用来给vue实例定义一些列的相关方法
}
});
</script>
v-bind绑定作用: 用来将html标签的属性进行绑定,交给vue实例管理 除了value属性以外所有属性 v-model模型作用: 用来将html标签的value属性进行绑定,交给vue实例管理 主要用在表单元素上 最能体现双向绑定机制一个指令\ 语法: 在表单元素标签上 直接加入 v-model="vue实例中一个变量"
Vue常用7个属性
el属性
用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板,会替换页面元素,包括占位符。
methods属性
放置页面中的业务逻辑,js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数,一个返回新值,一个返回旧值,
v-bind绑定元素(单向绑定)
我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似,但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联,所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新
我们还可以使用v-bind来绑定元素特性!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{{message}}<br>
<!-- v-bind被称为指令-->
<!-- 你看到的v-bind等被称为指令。指令带有前缀v-,以表示它们是Vue
提供的特殊特性。可能你已经猜到了,它们会在渲染的DOM上应用特殊的响应式行为。
在这里,该指令的意思是:“将这个元素节点的title 特性和Vue 实例的message属性保持一致”。
-->
<span v-bind:title="message">
鼠标悬停查看提示信息
</span>
</div>
<!-- 1.导入vue.min.js js/vue.js-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
//el 元素
el: "#app",
//model:数据
data: {
message: "hellow vue"
}
});
</script>
</body>
</html>
v-if v-else-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<h1 v-if="ok">true</h1>
<h1 v-else>false</h1>
</div><br>
<div id="app2">
<h1 v-if="type==='a'">A</h1>
<h1 v-else-if="type==='b'">B</h1>
<h1 v-else>C</h1>
</div>
<!-- 1.导入vue.min.js js/vue.js-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
//el 元素
el: "#app",
//model:数据
data: {
ok:true
}
});
var vm2 = new Vue({
//el 元素
el: "#app2",
//model:数据
data: {
type:'a'
}
});
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<li v-for="(item,index) in items">
{{index}}
{{item.message}}
</li>
</div>
<!-- 1.导入vue.min.js js/vue.js-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
//el 元素
el: "#app",
data: {
items: [
{message: '杨张宣'},
{message: '男'},
{message: '二十一'}
]
}
});
</script>
</body>
</html>
v-on绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="btn">点 击</button>
</div>
<script src="js/vue.js"></script>
<script>
var v = new Vue({
el: '#app',
data: {
message: "点击触发成功"
},
methods: {
btn: function (event) {
console.log(event)
alert(this.message)
console.log("vue点击事件");
}
}
})
</script>
</body>
</html>
VUE表单双绑、组件
什么是双向数据绑定
Vue.js是一个 MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化这也算是 Vue.js 的精髓之处了。 值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。
为什么要实现数据的双向绑定
在Vue.js中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,Vue.js 的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。
在表单中使用双向数据绑定
你可以用v-model指令在表单〈input> , <textarea〉及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
输入<input type="text" v-model="message"> <br>
性别:<input type="radio" name="sex" v-model="sex" value="男">男
<input type="radio" name="sex" v-model="sex" value="女">女<br>
{{sex}}
<br>
下拉菜单
<select v-model="sele">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
选中了{{sele}}
</div>
<script src="js/vue.js"></script>
<script>
var v=new Vue({
el:"#app",
data:{
message:"杨张宣",
sex:"男",
sele:"B"
}
})
</script>
</body>
</html>
复选框
复选框如果是一个为逻辑值,如果是多个则绑定到同一个数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>单个复选框:</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框:</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
</body>
</html>
更多推荐
VUE一些指令的使用
发布评论