Web前端——VUE
终于到了我们与生产环境最息息相关的技术——VUE,接下来我会从VUE简介到基本使用,给大家能基本入门VUE
1.VUE简介
- 渐进式JavaScript框架:vue适合不同层次的开发人员,比如简单的数据交互,数据与视图的绑定操作,可以直接用vue操作。
- vue两大特点:响应式编程、组件化。
- 完善的生态环境:vue router,vuex,Nuxt。
- 强大的组件化应用构建
- 声明式渲染,所有的元素都是响应式的。
缺点
- VUE不支持IE8及以下的浏览器
2.VUE基础
说到基础使用,一个完美的开发者文档,是一个能直接复制案列而不会报错的文档,我们来尝试下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 类似于为压缩版的jquery 有很多错误处理 有错误会在终端报错 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 类似于jquery.min.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
可以看出是可以完美运行的,这个案例只是简单使用VUE入门内容控制变量操作DOM
注意的点
- 不可以将Vue挂载到 body或者html标签上面
2.VUE指令
VUE指令可以基本代替js中对DOM操作,许多需要写很多js原生功能才能完成的功能,可能在VUE中一个指令就可搞定.下面我来介绍下基础指令
指令:Vue给标签设计的属性叫做指令。 指令的本质就是标签属性。只不过是以v-xxx开头。
语法:<标签名 v-指令名="变量/表达式"></标签名>
v-text
- 作用:渲染数据到标签里面
- 简写方式:{{}}
- 会覆盖原本html内容
- 不能解析html
- 共存的话 {message}}我不好
<div id="app">
<h1>{{message}}</h1>//简写方式,数据渲染到页面上<h1>你好</h1>
<h1 v-text="message"></h1>//指令方式,数据渲染到页面上<h1>你好</h1>
<h1 v-text="message">我不好</h1>//可以覆盖html内容<h1>你好</h1>
<h1>{{message}}我不好</h1>//共存<h1>你好我不好</h1>
<h1 v-text="a"></h1>//不能解析html
</div>
//js
<script>
// 创建一个vue对象
var app = new Vue({
el: '#app',
// 渲染到页面上的数据
data: {
message: '你好 ',
a : "<a href='#'> 我是一个a链接</a>"
}
})
</script>
v-html
- 可以把数据渲染到页面上
- 没有简写方式
- 可以解析文本
- 如果字符串里面包含标签 也可以解析
- 相对于v-text 使用频率不高
<div id="app">
<h1 v-html="message"></h1>
<h1 v-html="message">你好</h1>
<h1 v-html="a"></h1>
</div>
//js
// 创建一个vue对象
var app = new Vue({
el: '#app',
// 渲染到页面上的数据
data: {
message: '哈哈哈? ',
a : "<a href='#'> 我是一个a链接</a>"
}
})
v-on
- DOM事件绑定
- 简写方式:@事件名=“事件处理函数”
- 语法 v-on"事件名"=“事件处理函数”
- 可以传参 事件绑定里面传实参
- 可以修改 使用this 注意this指向
- 处理事件 @focus @blur @change …
<标签 v-on:事件名="事件函数"></标签>
<标签 v-on:事件名="事件函数()"></标签>
<标签 @事件名="事件函数"></标签>
<标签 @事件名="事件函数()"></标签>
// JS中
new Vue({
...
methods:{
事件函数(){
...
}
}
})
v-bind
- 绑定属性的指令 ,绑定事件在哪一个属性中发生
- 简写方式::属性名=“表达式”
- 语法 v-on"事件名"=“事件处理函数”
- 可以传参 事件绑定里面传实参
- 可以修改 使用this 注意this指向
- 处理事件 @focus @blur @change …
//css
.red {
background-color: #f00;
}
<div id="app">
//控制isRed为ture/false
<input type="button" value="切换背景" @click="isRed = !isRed">
//控制trtue/false是否有这个属性产生
<div :class="{red:isRed}"></div>
</div>
//js
<script>
const app = new Vue({
el :"#app",
data : {
isRed : true
}
</script>
v-for
- 作用:遍历数组或对象
- 注意:
- 多层循环嵌套,只要注意标识符名不要和外层冲突; 搞清楚内层循环的变量是谁
- 为了防止"就地复用",我们给每个循环项都添加上 一个key属性,注意key属性值不能相同
<div id="app">
//循环打印数组中数据
<p v-for="item in songList" @click="sing(item)">{{item}}</p>
//点击当前的p标签得到当前数据
<p v-for="(item, index) in songList">{{item}} -- {{index}}</p>
</div>
//js
<script>
const app = new Vue({
el :"#app",
data : {
songList : ["天下", "微微", "凉凉", "花心", "爱的供养"]
},
methods : {
sing(song) {
alert(song);
}
}
})
</script>
v-if
- 作用:条件渲染,切换显示不同的模板内容
- 注意:适用于一次性渲染
<标签 v-if="变量/表达式">展示的内容</标签>
<标签 v-if="变量/表达式">展示的内容1</标签>
<标签 v-else>展示的内容2</标签>
<标签 v-if="变量/表达式">展示的内容1</标签>
<标签 v-else-if="变量/表达式">展示的内容2</标签>
<标签 v-else-if="变量/表达式">展示的内容3</标签>
...
<标签 v-else>展示的内容其他</标签>
本片基础入门VUE就到这里,因篇幅过长,下篇在详解下vue里面的用法和注意事项,里面的案例都可在官网中的去找到,大家就先敲下,希望本篇文章能上手vue,嘻嘻嘻