vue框架2
插值语法
mvvm演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{name}}
<br>
<input type="text" v-model="name">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'hanser',
age:22
}
})
</script>
</html>
插值语法
# 插值语法中可以放的有：
- 变量，对象取值，数组取值
- 简单的js语法
- 函数()
# 插值只能写在标签内部，不能写在标签属性上
<!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[1]}}</p>
<p>妻子:{{wife}}</p>
<p>妻子年龄:{{wife.age}}</p>
<!--<p>运算:{{20+2*4}}</p>-->
<p>三目运算符:{{20>21?'大于':'小于'}}</p>
<p>标签:{{a_url}}</p> </div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'hanser',
age:22,
hobby:['唱跳','rap','篮球'],
wife:{name:'刘亦菲',age:38},
a_url:'<a href={"http://www.baidu.com"}>百度</a>',
// 三目运算符
}
})
</script>
</html>
文本指令
# 指令系统：vue提供的
-v-xx 写在标签上，任意标签
-v-xx="" 插值语法中可以写的，它都能写
# 例：a_url必须是data中定义的变量
<p v-text="a_url"></p>
# v-text <!--直接把字符串内容渲染在标签内部，等同于-->
<p v-text="a_url"></p>
# v-html <!--把字符串的内容渲染成标签，写在标签内部-->
<p v-html="a_url"></p>
# v-show <!--控制样式显示与否，等于布尔值，代表该元素是否显示-->
<p v-show></p>
# v-show_if <!--在DOM中删除整个标签，等于布尔值，代表该元素是否被删除--> # 代码示例：
<!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 v-text="a_url"></p>
<p v-html="a_url"></p>
<p v-show></p> <!--控制样式显示与否，等于布尔值，代表该元素是否显示-->
<img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt=""
v-show="show" width="200px" height="200px">
<p>v-if</p>
<img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt=""
v-show_if="show" width="200px" height="200px">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a_url:'<a href="http://www.baidu.com">百度</a>',
show:true,
show_if:true
}
})
</script>
</html>
属性指令
# 标签上的属性可以绑定变量，属性值会随着变量变化
例如：有src，href，class等 # 语法：
v-bind:属性名="变量名" # 简写：
:属性名="变量名"
事件指令
# 事件指令
- 点击事件(使用最多的)
- 双击事件
- 滑动事件 # 点击事件
1. v-on:事件名='函数'--->简写--->@事件名='函数' <button v-on:click="handleClick"></button>
2. 函数必须写在methods的配置项中
methods:{
'handleClick':function (){
console.log(this)
this.show=!this.show
}}
3. 上面的this是当前vue的实例
4. 点击button就会触发绑定函数(handleClick)的执行 # 代码示例：写一个点击按钮，随机切换，美女图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">点击看美女</button>
<div>
<img :src="url" alt="" width="600px" height="600px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
url:'https://pic1.zhimg.com/v2-cd7bc16e977b162d9092899ad106db73_r.jpg',
url_list:['https://n.sinaimg.cn/sinakd20201010s/292/w640h1252/20201010/ccf8-kakmcxc4806009.jpg',
'https://n.sinaimg.cn/sinacn20118/214/w2048h1366/20190111/3f99-hrpcmqv4220798.jpg',
'https://pic4.zhimg.com/v2-0b676d3c16993f59466eca32858b4454_r.jpg',
'https://t1.huanqiucdn.cn/7ef5e4ba546f17923ff99f22a46ad0b2.jpg',
'https://pic2.zhimg.com/v2-cfabe13dfca655355e93068d3ce2fcbe_r.jpg'
],
},
methods:{
handleClick() {
var _this = this
setInterval(function () {
console.log(_this)
var i = Math.round(Math.random() * (_this.url_list.length - 1))
_this.url = _this.url_list[i]
console.log(i)
},1000)
}
}
})
</script>
</html>
class和style
# 两者都是属性指令，应用广泛 # class：推荐用数组
:class='变量' # style：推荐用对象
:style='变量'
变量可以是字符串，数组，对象
# 数组的方发...移除pop(自行百度) # 代码示例：
<!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>class</h1>
<!-- <div :class="class_str">div</div>-->
<!-- <div :class="class_list">div</div>-->
<div :class="class_obj">div</div>
<h2>style</h2>
<!-- <div :style="style_str">style</div>-->
<!-- <div :style="style_list">style</div>-->
<div :style="style_obj">style</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class_str:'font red font-color',
// class_list:['font'], // 推荐
class_obj: {font: true, green: 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'} },
})
条件渲染
# 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>
</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">点击显示商品</button>
<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>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show:false,
good_list: [
{id:1,name:'宝马',price:'450000'},
{id:2,name:'赛马',price:'1000000'},
{id:3,name:'小马',price:'120000'},
{id:4,name:'老马啊，老马',price:'4500'},
]
},
methods:{
handleClick() {
this.show=!this.show
},
}
}) </script>
</html>
vue框架2的更多相关文章
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- 使用vue框架运行npm run dev 时报错解决
使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...
- Vue框架下的node.js安装教程
Vue框架下的node.js安装教程 python服务器.php ->aphche.java ->tomcat. iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...
- Vue框架axios请求（类似于ajax请求）
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- Vue框架
Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
- 何为GUI？？？
1.GUI是什么–简介 GUI的全称为Graphical User Interface,图形化界面或图形用户接口,是指采用图形方式显示的计算机操作环境用户接口.与早期计算机使用的命令行界面相比,图形界 ...
- [OpenCV实战]40 计算机视觉工具对比
文章目录 1 简介 2 适用于计算机视觉的MATLAB 2.1 为什么要使用MATLAB进行计算机视觉:优点 2.2 为什么不应该将MATLAB用于计算机视觉:缺点 3 适用于计算机视觉的OpenCV ...
- [IOI2016] shortcut
有显然的 \(O(n^3)\) 做法,可以获得 \(38pts\).(退火在洛谷上能跑 \(75pts\)) 答案具有单调性,考虑二分一个 \(M\) 并判断.列出 \(i\) 到 \(j\) 的距离 ...
- Maui 读取外部文件显示到Blazor中
Maui 读取外部文件显示到Blazor中 首先在maui blazor中无法直接读取外部文件显示 ,但是可以通过base64去显示 但是由于base64太长可能影响界面卡顿 这个时候我们可以使用bl ...
- 激光炸弹【算法竞赛进阶指南, HNOI2003】
激光炸弹 地图上有 \(N\) 个目标,用整数 \(Xi,Yi\)表示目标在地图上的位置,每个目标都有一个价值 \(Wi\). 注意:不同目标可能在同一位置. 现在有一种新型的激光炸弹,可以摧毁一个包 ...
- Hash——温暖人心的算法
目录 简介 计算Hash 前缀Hash递推 快速计算子串Hash 用Hash匹配字符串 综合:P2852 [USACO06DEC]Milk Patterns G 简介 Hash,将一个字符串映射到一个 ...
- vue构建打包兼容操作（vue代码规范建议）-转载Vuejs项目不改动一行代码同时支持用Rollup，vue-cli，parcel构建的一些建议
- k8s部署canal-1.1.6版本实现MySQL数据库数据同步
1.版本说明 软件&镜像 版本&镜像信息 说明 Kubernetes v1.23.7 k8s服务器 Kuboard v3.5.2.0 k8s连接管理工具 Canal v1.1.6 数据 ...
- C-01\编译器和链接器以及真正的入口函数
编译器: 工具 编译器 路径 VC++6.0 CL.EXE(一段shell)只负责分析命令行参数,真正功能实现在C1.DLL.C1XX.DLL.C2.DLL C:\Program Files (x86 ...
- .net core Autofac IOC 容器的简单使用
书接上回,介绍了.net core 读取配置文件的几种方式,本文学习Autofac的同时再次增加一种读取配置文件的方法. 本文介绍Auofac,一个优秀的.NET IOC框架 源码地址:https:/ ...