VUE
first_vue
- 键入英文格式下的！并回车，自动生成格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 连接vue的两种方式
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
官网直接复制
<Script src="vue.js"></Script>
在官网下载后拖入文件夹再进行连接
- 输出hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src="vue.js"></Script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<!-- 采用双大括号进行数据绑定，双大括号中的内容会被替换为对应数据对象上的值 -->
{{ message }}
</div>
</body>
<script>
// 创建一个vue实例
var app = new Vue({
el: '#app', /* 数据将会被传输到id为app的div中 数据绑定 element*/
data: { /* 进行数据插入 */
message: 'Hello Vue!.js!!!' /* 将数据插入到message中 */
}
})
</script>
</html>
case2_生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src="vue.js"></Script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!.js!!111!'
},
beforeCreate() {
console.log("beforeCreate.......")
},
created() {
console.log("created............")
},
beforeMounted() {
console.log("beforeMounted...............")
},
mounted() {
console.log(" mounted..............")
},
beforeUpdate() {
console.log("beforeUpdat..............")
},
update() {
console.log("update...................")
},
})
</script>
</html>
vue的生命周期，运行程序控制台中会输出日志内容
case3-模板语法-插值
- Mustache语法，即{{}}语法
<div id="app">
<p>常量：{{a}}</p>
<p>运算符：{{a + b}}</p>
<p>简单表达式：{{ a==1 ? '男': '女'}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
a:1,
b:2
}
})
</script>
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
<span>Message: {{ msg }}</span>
msg将会被代替。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
2.如何使用HTML语言
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src="vue.js"></Script>
</head>
<body>
<div id="app">
{{ message }}
<br>
{{max}}
<br>
<span v-once>{{ message }}</span>
<!-- v-once 该标签仅使用一次，值不会改变 -->
<hr>
<p>Using mustaches: {{ rawHtml }}</p><!-- 将{{}}中内容给识别为文本 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p><!-- 使用v-html指令 -->
<span style="color: green;">This should be red</span>
<hr>
{{ number + 1 }}
<br>
{{ ok ? 'YES' : 'NO' }}
<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
max: 123456,
message: 'Hello Vue!.js!!!',
rawHtml: ' <span style="color: red;">This should be red</span>',
number: 2021,
ok: '1'
}
})
</script>
</html>
case4-模板语法-指令
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
参数
- 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，
v-bind指令可以用于响应式地更新 HTML attribute：
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
- 另一个例子是
v-on指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">...</a>
在这里参数是监听的事件名。我们也会更详细地讨论事件处理。
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src="vue.js"></Script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<p v-if="seen">现在看到我了</p>
<br>
<a v-bind:href="url">宁夏大学</a>
<br>
<div @click="showMsg2">
<a v-on:click="showMsg">点击我</a>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
seen: false,
url: 'https://www.nxu.edu.cn/',
},
// 单击按钮弹出对话框事件
// function(){
// alert();
// }
methods: {
showMsg: function () {
alert("Hello");
console.log("showMsg")
},
showMsg2: function () {
console.log("showMsg2")
}
}
})
</script>
</html>
case5-计算属性-侦听器
对于任何复杂逻辑，你都应当使用计算属性。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src="vue.js"></Script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<div>firstName:{{ firstName }}</div>
<div>lastName:{{ lastName }}</div>
<h3>侦听器</h3>
<div>fullName:{{ fullName }}</div>
<h3>计算属性</h3>
<div>fullName:{{ computedFullname }}</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
//监听firstName
firstName: function (val) {
// this指向成员函数，val为形参，即传入的参数
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
},
computed: {
computedFullname: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</html>
case6-条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<h1 v-if="awesome">Vue is awesome!</h1>
也可以用 v-else 添加一个“else 块”：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
在元素上使用v-if条件渲染分组
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”：
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src="vue.js"></Script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h3>=====================V-SHOW===================</h3>
<h1 v-show="ok">Hello show !</h1>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'A',
ok: null
}
})
</script>
</html>
case7-绑定class和Style
绑定HTML Class
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。
data:{
isActive:true
}
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
绑定内联样式
对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
同样的，对象语法常常结合返回对象的计算属性使用。
数组语法
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Script src="vue.js"></Script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<div v-bind:class="{active:isAtive,white:isWhite}"
style="width: 1000px; height: 50px; text-align: center; line-height: 50px;">
对象语法：直接绑定active样式
</div>
<div v-bind:class="['active','white']"
style="width: 1000px; height: 50px; text-align: center; line-height: 50px;">
数组语法：v-bind:class="['active','white']""直接绑定active样式
</div>
<br>
<div v-bind:class="[activeVal,whiteVal]"
style="width: 1000px; height: 50px; text-align: center; line-height: 50px;">
数组语法2：绑定data属性（变量） v-bind:class="[activeVal,whiteVal]"
</div>
<br>
<div v-bind:class="[isAtive ? activeVal:'',whiteVal]"
style="width: 1000px; height: 50px; text-align: center; line-height: 50px;">
数组语法3：v-bind:class="[isActive?activeVal:'',whiteVal]"
</div>
<br>
=========================绑定Style=============================
<br>
<div :style="{background:activeColor,'font-size':fontSize + 'px'}">
对象语法:style="{background:activeColor,'fond-size':fontSize + 'px'}"
绑定数据
</div>
<br>
<div :style="styleObj">
对象语法2 :style="styleObj"
</div>
<br>
<div :style="[styleObj,styleObj2]">
对象语法3 ：style=[styleObj,styleObj2]
</div>
<div v-bind:class="{texr:isAtive}"
style="width: 1000px; height: 50px; text-align: center; line-height: 50px;">
绑定class：直接绑定样式
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
// class绑定
isAtive: true,
isWhite: true,
activeVal: 'active',
whiteVal: 'white',
//sytle绑定
activeColor: 'red',
fontSize: 30,
//对象语法3
styleObj: { background: 'red', 'font-size': '30px' },
styleObj2: { color: 'white' }
}
})
</script>
<style>
.active {
background: red;
}
.white {
color: white;
font-size: 30px;
}
.texr {
background: green;
font-size: 30px;
}
</style>
</html>
3421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
