001-VUE---入门以及常用指令
1. VUE介绍
1.1 VUE介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.2 VUE官网
https://cn.vuejs.org/
1.3 VUE下载
https://vuejs.org/v2/guide/installation.html
2. VUE入门案例
2.1 创建1-入门案例.html文件
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
body>
html>
2.2 引入vue.js文件
>
2.3 编写入门案例
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<h1>{
{hello}}h1>
div>
<script src="../js/vue.js">script>
<script>
//新规定: 1.结尾的;号可以省略 2.字符一般使用'单引号'
//补充知识: var: js中声明变量的修饰符 没有作用域的概念
// 1.const 定义常量的
// 2.let 有作用域的变量声明.
//1.实例化VUE对象 函数式编程
const app = new Vue({
//1.定义el元素 要在哪个位置使用vue进行渲染
el: "#app",
//2.定义数据对象
data: {
hello: 'VUE入门案例!!!!'
}
})
script>
body>
html>
2.4 运行查看结果
2.5 名词解释
- var:：js中声明变量的修饰符 没有作用域的概念
- const：定义常量的
- let：有作用域的变量声明.
- el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
- data：data属性专门用来以对象方式存放数据，可以用最对象使用，也可以用作函数使用
- { {XXX}}：插值表达式基本语法，“Mustache”语法 (双大括号) 的文本插值
3. v-clock指令
3.1 用法
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
3.2 需求
由于插值表达式在渲染没有完成时,会展现 { {hello}} 效果,用户体验不好 是否可以优化优化: 如果在渲染没有完成时,不给用户展现任何信息.
3.3 案例
<html>
<head>
<meta charset="utf-8">
<title>数据显示案例测试title>
<style>
/* 渲染没有完成时不展现 */
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="app">
<h1 v-cloak>{
{hello}}h1>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
hello: '----vue案例',
}
})
script>
body>
html>
3.4 结果
4.v-text指令
4.1 用法
更新元素的 textContent。如果要更新部分的 textContent，需要使用 { { Mustache }} 插值。
4.2 案例
<html>
<head>
<meta charset="utf-8">
<title>数据显示案例测试title>
head>
<body>
<div id="app">
<span v-text="message">span>
<br/>
<span>{
{message}}span>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'v-text的用法',
}
})
script>
body>
html>
4.3 结果
5. v-html指令
4.1 用法
更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
4.2 案例
<html>
<head>
<meta charset="utf-8">
<title>数据显示案例测试title>
head>
<body>
<div id="app">
<span v-html="html">span>
<span>{
{html}}span>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
html: 'html效果展现
'
}
})
script>
body>
html>
4.3 结果
6.v-pre指令
6.1 语法
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
6.2 案例
<html>
<head>
<meta charset="utf-8">
<title>数据显示案例测试title>
head>
<body>
<div id="app">
<span v-pre>{
{name}}span>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'v-pre跳过vue解析'
}
})
script>
body>
html>
6.3 结果
7.v-once指令
7.1 语法
只渲染元素和组件一次
7.2 案例
<html>
<head>
<meta charset="utf-8">
<title>数据显示案例测试title>
head>
<body>
<div id="app">
<span v-once>{
{once}}span>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
once: '只渲染元素和组件一次',
}
})
script>
body>
html>
7.3 结果
8. v-model指令
8.1 语法
在表单控件或者组件上创建双向绑定
如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model，一般在输入框中最为常用,一般用来保证数据的一致性
8.2 案例
<html>
<head>
<meta charset="utf-8">
<title>数据显示案例测试title>
head>
<body>
<div id="app">
<input name="model" v-model="model" />
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
model: '测试双向数据绑定'
}
})
script>
body>
html>
8.3 结果
vue对象中的数据渲染到DOM对象中
DOM对象中的数据更新到vue对象中
9. v-on指令
9.1 用法
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件
9.2 案例一：自增
<html>
<head>
<meta charset="utf-8">
<title>事件绑定操作title>
head>
<body>
<div id="app">
{
{num}}
<button v-on:click="num++">自增button>
<button @click="num++">自增button>
<button @click="addNum">自增button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
//js中方法称之为函数!!!!
addNum(){
//对num + 1
this.num ++
}
}
})
script>
body>
html>
9.3 结果一
9.4 案例二：加法运算
<html>
<head>
<meta charset="utf-8">
<title>计算机案例title>
head>
<body>
<div id="app" @click="addNum">
<h1>计算机案例h1>
数据1: <input type="text" v-model="num1"/><br>
数据2: <input type="text" v-model="num2" @keyup.enter="addNum"/>
<button @click="addNum">计算button>
<br>
总数: {
{count}}
div>
<script src="../js/vue.js">script>
<script>
/* 业务思路
1.动态获取用户的数据
2.准备一个加法的方法
3.将结果进行展现.
*/
const app = new Vue({
el: "#app",
data: {
num1: '',
num2: '',
count: ''
},
methods:{
addNum(){
//数值转化 parseInt()
this.count = parseInt(this.num1) + parseInt(this.num2)
}
}
})
script>
body>
html>
9.5 结果二
10. v-bind指令
10.1 用法
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
10.2 案例
<html>
<head>
<meta charset="utf-8">
<title>属性绑定title>
<style>
.red{
background-color: red;
width: 100px;
height: 100px;
}
style>
head>
<body>
<div id="app">
<a href="http://www.baidu.com">百度a>
<a v-bind:href="url">百度a>
<a :href="url">a>
<hr >
<div class="red">
class的内容测试
div>
<hr >
<div v-bind:class="{red: isRed}">
class的内容测试
div>
<div :class="{red: isRed}">
class的内容测试
div>
<button @click="isRed = !isRed">切换button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
url: 'http://www.baidu.com',
//如果控制样式 则设定boolean类型的值
isRed: false
}
})
script>
body>
html>
10.2 结果
11. v-if-else if -else指令
11.1 语法
v-if/v-else位置应该连续 v-else不可以单独使用（类似java分支结构）
11.2 案例（成绩判断）
<html>
<head>
<meta charset="utf-8">
<title>分支结构title>
head>
<body>
<div id="app">
<h3 v-if="score >= 90">优秀h3>
<h3 v-else-if="score>=80">良好h3>
<h3 v-else-if="score>=70">中等h3>
<h3 v-else-if="score>=60">及格h3>
<h3 v-else>不及格h3>
<h3 v-show="isShow">展现一个变化的数据h3>
<button @click="isShow = !isShow">切换button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
score: 50,
isShow: true
}
})
script>
body>
html>
11.3 结果
12. v-show指令
12.1 用法
根据表达式之真假值，切换元素的 display CSS property。
当条件变化时该指令触发过渡效果
12.2 案例
<html>
<head>
<meta charset="utf-8">
<title>数据显示案例测试title>
head>
<body>
<div id="app">
<span v-show="show">展示数据span><br />
<button @click="show = !show">切换button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
show: true,
}
})
script>
body>
html>
12.3 结果
点击切换关闭展示
点击切换开启展示
13.v-for指令
13.1 语法
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名
13.2 案例（遍历数组&集合）
<html>
<head>
<meta charset="utf-8">
<title>循环结构title>
head>
<body>
<div id="app">
<h3 v-for="item in hobbys" v-text="item" :key="item">h3>
<h3 v-for="(item,index) in hobbys" v-text="item" :key="index">h3>
<div v-for="user in userList" :key="user.id">
<span v-text="user.id">span>
<span v-text="user.name">span>
div>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: "#app",
data: {
//一般采用数组形式保存多个数据
hobbys: ['打游戏','敲代码','喝水','水王八'],
userList: [{
id: 100,
name: '孙尚香'
},{
id: 200,
name: '王昭君'
},{
id: 300,
name: '貂蝉'
}]
}
})
script>
body>
html>
