插值语法 文本指令 属性指令 事件指令 条件渲染 列表渲染
回顾
JSON.cn网址 json格式字符串解析
APPEND_SLASH
请求走请求来走的中间件
请求来的时候：process request
请求走的时候：process response
session
dtl:django template language 是Django的模板语法
前端发展史
-html5 css3 javascript --->>> ecma+bom+dom
es5、es6(箭头函数，导入导出语法)、es13
ajax：没有前端框架，纯Ajax+页面。不需要后端的渲染 -
前端框架：vue，react（主流）
uni-app：vue语法写小程序，android，ios
vue
反引号：模板语法
es6中：箭头函数，导入导出语法
typescript 前端开源编程语言
IDE： 编辑器，集成开发环境GO语言开发编辑器golang
第一个vue
版本有2 3，3完全兼容2，3不推荐使用2的语法
第一个vue --->>> 渐进式框架
把vue2源码，下载到本地 --->>> js代码
HTML中引入，写vue语法
-new Vue({
el:'#app',
data:{
name:'lqz'
}
}) 实例
实例对象 new一个对象
数据双向绑定，data中定义的变量 可以从vm实例中直接拿到。
插值语法
插值语法可以放：
-
变量、对象取值、数组取值，
-
简单的js语法
-
函数()
只能写在标签的内部，js中[ ]中括号的 --->> 数组，取值是通过索引的方式。{ }花括号的 --->> 对象，取值有两种方式1️⃣中括号wife['name']的方式2️⃣wif.name点的方式
如下：如果标签有用的话，就会存在XSS攻击。
三目运算符：条件？'符合':'不符合'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}}----->第一个爱好：{{hobby[1]}}</p>
<p>妻子:{{wife}}----》妻子的年龄:{{wife.age}}---{{wife['age']}}</p>
<p>运算:{{10*2+3*4}}</p>
<p>三目运算符【条件?'符合了':'不符合了'】:{{10>90?'大于':'小于'}}</p>
<p>标签（默认不会渲染成标签）:{{a_url}}</p>
<p>函数()</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age: 19,
hobby: ['篮球', '足球', '乒乓球'],
wife: {name: '刘亦菲', age: 38},
// 运算
a_url: '<a href="http://www.baidu.com">点我看美女</a>'
// 三目运算符 三元表达式
}
})
</script>
</html>
文本指令：
系统指令，vue提供的，通过v-xx，写在标签上的，统称为指令，只能写在标签的属性上，原来插值语法能写的，他都能写。不要再加{{ }}。
# 指令系统：vue提供的 都是 v-xx 写在标签属性上的 ，统称为指令，例如，a_url必须是data中定义的变量
<p v-text="a_url"></p>
# v-text直接把字符串内容渲染在标签内部，等同于
<p v-text="a_url"></p>
<p>{{a_url}}</p>
# v-html 把字符串的内容渲染成标签，写在标签内部
<p v-html="a_url"></p>
# v-show 等于布尔值，该标签是否显示 样式控制显示不显示：style="display: none;"
# v-if 等于布尔值，该标签是否显示 整个标签之间删除，效率低，在dom中删除标签
属性指令：
a标签里面的属性href
标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化。
语法：v-bind:属性名=变量名，简写成 :属性名='变量名'
页面跟着变数据跟着变，数据跟着变页面也跟着变
事件指令
事件指令是：点击事件、双击事件、滑动事件。。。用的最多的是点击事件click。
v-on(事件指令):click(事件名)='函数'。函数得写在methods里面
函数写在配置项中的methods里，它是一个对象，得键值对的形式哦
如下图中this就是当前的vue实例，--->也就是vm实例
打印结果：
this.show=!this.show，给取反赋值操作。点击button就会触发绑定函数(handleClick)的执行
简写：@事件名='函数'
小案例：点击按钮，随机切换美女图片
取小数了，无法显示。
取整数round，
小案例：每隔1s钟换一个美女图片
this指向问题：打印的this如图
setintarval定时：1000就是一秒。解决：
es6语法对象的简写形式：
参数可以传多个也可以少传
class和style
都是属性指令，但是比较特殊，应用更加广泛
# class：推荐用数组
:class='变量'
变量可以是字符串，数组，对象
# style：推荐用对象
:style='变量'
变量可以是字符串，数组，对象
class
class字符串形式
class数组形式
移除：pop
class对象形式
对象中用括号新增属性，数组的检测没有更新，没有监听它的变化
不能用杠
加引号可以来避免
style
style字符串形式
style数组形式
可以引号也可以驼峰
style对象形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.font {
font-size: 60px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.font-color {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h1>clss</h1>
<div :class="class_obj">我是div</div>
<h1>style</h1>
<div :style="style_obj">我是style-----div</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class_str:'font',
// class_list:['font'], # 推荐
class_obj: {font: true, green: false, 'font-color': false},
style_str: 'color: green;font-size:80px',
// style_list: [{color:'yellow'}, {'font-size':'90px'}],
style_list: [{color: 'yellow'}, {fontSize: '90px'}], // 可以用驼峰
style_obj: {color: 'yellow', fontSize: '80px'}
// style_obj: {color: 'yellow', 'font-size': '80px'}
},
})
</script>
</html>
条件渲染
# v-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else 放在标签上，上面条件都不成立，显示这个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1>通过分数显示文字</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80&&score<90">良好</div>
<div v-else-if="score>=60&&score<80">及格</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99
},
})
</script>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-if+v-for 显示购物车</h1>
<button @click="handleClick" class="btn btn-danger">点我显示</button>
</div>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: false,
good_list: [
{id: 1, name: '钢笔', price: '29'},
{id: 2, name: '铅笔', price: '29'},
{id: 3, name: '文具盒', price: '298'},
{id: 4, name: '彩笔', price: '298'},
]
},
methods: {
handleClick() {
this.show = !this.show
},
}
})
</script>
</html>
补充
# 解释器
# ide：集成开发环境，快速开发
-pycharm
-goland
-vscode
# dtl：django template language djagno的模板语法
# js设置定时器、取消定时器
1.setTimeout()：设置一个定时器，在定时器到期后执行一次函数或代码段：setTimeout(fn, x) 表示延迟 x 毫秒之后执行 fn
2.clearTimeout()：取消定时器
var myVar = setTimeout(function(){ alert("Hello"); }, 3000);
clearTimeout(myVar);
3.setInterval()：以固定的时间间隔重复调用一个函数或者代码段：
4.clearInterval（）取消定时器，可取消/停止由 setInterval() 函数设定的定时执行操作。
var myVar = setInterval(function(){ myTimer() }, 1000);
clearInterval(myVar);
