一、vue的使用
1.引入方式
cdn
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
本地
通过cdn或者官方网站地址下载到本地以js方式引入
2.简单使用Vue
2.1普通数据
html结构
<div id="app">
<h1>{{text}}</h1>
</div>
引入vuejs后再书写 js部分
new Vue({
el:"#app",
data:{
text:'我是标题'
}
})
2.2复杂数据
<div id="app">
<p>{{student.name}}今年{{student.age}}岁，性别:{{student.sex}}</p>
</div>
new Vue({
el: "#app",
data: {
student: {
name: '张三',
age: 20,
sex: '男'
}
}
})
3.快速创建使用vue结构 -- 代码片段
{
"html:5": {
"prefix": "hv",
"body": [
"<!DOCTYPE html>",
"<html en=\"zh_cn\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>标题</title>",
"<link rel=\"icon\" href=\"../../lib/logo.svg\">",
"</head>",
"<body>",
"<div id=\"app\"></div>",
"</body>",
"</html>",
"<script src=\"../../lib/vue.js\"></script>",
"<script>",
"new Vue({",
"\tel: \"#app\",",
"\tdata: {",
"\t",
"\t}",
"})",
"</script>"
],
"description": "HTML5"
}
}
4.经典练习题 -- 双向绑定
4.1双向绑定 -- 原生js
<!-- oninput事件 动态获取 -->
<input type="text" oninput="addInput(this.value)" value="">
<p id="text"></p>
let inp = document.querySelector('input')
let txt = document.querySelector('#text')
let data = {}
// 对象方法 动态添加属性 define -- 定义 Property -- 属性
// Object.defineProperty(对象名,定义属性,配置项 }
Object.defineProperty(data, 'msg', {
// get 代表要赋值给msg的值
get: function () {
return '你好原生js双向绑定'
},
// set 修改msg值时触发 ，拿到最新数据 - 你要做什么事
set: function (newText) {
inp.value = newText
txt.innerText = newText
}
})
inp.value = data.msg
txt.innerText = data.msg
// 封装函数动态获取内容
function addInput(text) {
// 当msg发生修改数据会 -- 自动触发set
data.msg = text
}
4.2双向绑定 -- vue.js
<div id="app">
<input type="text" v-model="text">
<p>{{text}}</p>
</div>
new Vue({
el: "#app",
data: {
text:'双向数据绑定'
}
})
5.各种指令的使用
5.1 、v-pre
<div id="app">
<!--
v-pre 的作用：
让{{}}（胡子/Mustache） 语法失效 使他显示原本的内容
-->
<p>当用户输入 <span v-pre>{{msg}}</span> 时可以看到{{msg}}</p>
</div>
new Vue({
el: "#app",
data: {
msg: ' hello word !'
}
})
5.2、v-html 与 v-text
<!--
v-html 与 v-text 的区别
v-html 可以解析标签
v-text 不能解析标签 把内容以纯文本输出 与 胡子语法/Mustache {{text}} 一样
-->
<div id="app">
<ul>
<li v-html="div"></li>
<li v-text="div"></li>
<li>{{div}}</li>
<li>----------------</li>
<li v-html="text"></li>
<li v-text="text"></li>
<li>{{text}}</li>
</ul>
new Vue({
el: "#app",
data: {
div: "<span>我是标签和内容</span>",
text: '我是内容'
}
})
5.3、 v-cloak
<!--
v-cloak的作用
在数据没渲染时隐藏标签，数据渲染完成后显示
-->
<div id="app">
<ul>
<li>{{msg1}}</li>
<li v-cloak>{{msg2}}</li>
</ul>
</div>
new Vue({
el: "#app",
data: {
msg1: '内容1',
msg2: '内容2'
}
})
5.4、v-show
<!--
v-show 与 v-if的区别：
v-show --性能更好 是css层面上的修改
v-if功能更多 ---- 元素上的销毁与创建
使用环境
频繁隐藏显示使用v-show
只渲染一次并且不需要修改 -- 两种都可
-->
<div id="app">
<div class="box" v-show="flag1">box1</div>
<div class="box" v-if="flag2">box2</div>
</div>
new Vue({
el: "#app",
data: {
flag1: true,
flag2: true
}
})
5.5、v-if
<!-- 和if else if 与 else 一样 -->
<div id="app">
<ul>
//判断分数显示对应评级
<li v-if="num>=90">优秀</li>
<li v-else-if="num>=60">及格</li>
<li v-else style="color:red">不及格</li>
</ul>
</div>
new Vue({
el: "#app",
data: {
num:50 //自定义分数
}
})
5.6、v-on
<div id="app">
<button v-on:click="btnFun">按钮1</button>
<!-- 简便写法 -->
<button @click="btnFun">按钮2</button>
<div class="box" v-show="flag"> 内容 </div>
</div>
var item
new Vue({
el: "#app",
// 专门放数据的地方
data: {
flag: true
},
// 专门存放函数的地方
methods: {
btnFun() {
// console.log(this);
this.flag = !this.flag
}
}
})
简化写法:v-on:click -- @click
5.7练习 -- 实现简单的内容切换 -- 显示隐藏
css样式
#app {
text-align: center;
}
html结构
<div id="app">
<!-- <button @click="btnClick(1)">盒子1</button>
<button @click="btnClick(2)">盒子2</button>
<button @click="btnClick(3)">盒子3</button> -->
<!-- 优化代码 -->
<button @click="num=1">盒子1</button>
<button @click="num=2">盒子2</button>
<button @click="num=3">盒子3</button>
<hr>
<div class="box1" v-show="num==1">盒子1</div>
<div class="box2" v-show="num==2">盒子2</div>
<div class="box3" v-show="num==3">盒子3</div>
</div>
js部分
new Vue({
el: "#app",
data: {
num: 1
},
// 优化代码 注释掉原来的函数 -- 使用 @click="num=1" ↑（html优化代码部分）
// methods: {
// btnClick(id) {
// this.num = id
// }
// }
})
