vue 框架,入门必看
vue 的 入门
el 的挂载点:
el 是用来设置vue实例挂载,(管理)的元素
vue会管理el选项命中的元素以及内部的后代元素
可以使用其他的选择器,但是不建议使用ID选择器
可以使用其他的双标签,不能使用HTML和body
data: 数据对象
vue 中 用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂数据时,遵守js的语法即可
- code
<div id="app">
{{message}}
<h2>{{school.name}}{{school.age}}</h2>
<ul>
<li>{{ campus[] }}</li>
<li>{{ campus[] }}</li>
<li>{{ campus[] }}</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:"hello vue",
school:{
name:"柚子小哥哥",
age:""
},
campus:['苏州','上海','北京']
},
})
</script>
v-text
v-text 指令的作用就是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达是{{}}可以替换指定内容
- code
<div id="app">
<h2 v-text="message+'嘻嘻'"></h2>
<h2 v-text='info'></h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"柚子小哥哥!!!",
info:"Hello vue"
}
})
</script>
v-html
v-html 指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text 指令无论内容是什么,只会解析为文本
- code
<div id="app">
<p v-html='content'></p>
<p v-text='content'></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='https://www.cnblogs.com/yjzs/'>柚子小哥哥的博客园</a> "
}
})
</script>
v-on
v-on 指令的作用是:为元素绑定事件
事件名称不需要写on
指令可以简写为@
绑定的方法定义在 methods 属性中
方法的内部通过this关键子可以访问定义在data中数据
事件绑定的方法写成函数调用的形式,可以传递自定义参数
定义方法是需要形参来接受传入的实差参
事件的后面根上修饰符可以对事件进行限制
.enter 可以限制触发的按键的为回车
- code
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt" />
<input type="button" value="v-on简写" @click="doIt" />
<input type="button" value="双击事件" @dblclick="db" />
<input type="text" @keyup.enter="say" />
<p @click="changeFood">{{food}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "柚子小哥哥!",
},
methods: {
doIt: function () {
alert("绑定点击事件");
},
db: function () {
alert("绑定双击事件!");
},
changeFood: function () {
// console.log(this.food);
this.food += "好帅啊。";
},
say: function () {
alert("绑定回车事件!");
},
},
});
</script>
v-show
v-show 指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display实现显示隐藏
指令后面的内容,最终都会解析会布尔值为true元素,值为false元素为隐藏
- code
<div id="app">
<input type="button" value="切换显示状态" @click="ChangeShow" />
<input type="button" value="累加" @click="add" />
<img v-show="isShow" src="./img//7735908_161703348144_2.jpg" alt="" />
<img v-show="age>=18" src="./img//7735908_161703348144_2.jpg" alt="" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
age: ,
},
methods: {
ChangeShow: function () {
this.isShow = !this.isShow;
},
add: function () {
this.age++;
},
},
});
</script>
v-if
v-if 指令的作用就是:根据表达式的真假切换元素的显示状态
本质是通过 DOM 元素老切换显示状态
表达式的值为true,元素存在与DOM树中,为false,从DOM中移除
- code
<div id="app">
<input type="button" @click="Show" value="切换显示" />
// v-if 操作的是DOM树
<p v-if="isShow">柚子小哥哥</p>
// v-show操作的是样式
<p v-show="isShow">v-show</p>
<p v-show="like>10">不喜欢</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
like:
},
methods: {
Show: function () {
this.isShow = !this.isShow;
},
},
});
</script>
v-bind
v-bind 指令的作用就是:为元素绑定属性
完整的写法是 v-bind 属性名
简写的话直接省掉v-bind ,只保留: 属性名
需要动态的增删class建议使用对象的方式
- code
<div id="app">
<img v-bind:src="imgSrc" alt="" />
<br />
<img
:src="imgSrc"
alt=""
:title="imgTitle"
:class="{Ac:Active}"
@click="Active"
/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "./img//7735908_161703348144_2.jpg",
imgTitle: "柚子小哥哥",
isActive: false,
},
methods: {
Active: function () {
this.isActive = !this.isActive;
},
},
});
</script>
v-for
v-for 指令的作用就是:根据数据生成的列表结构
数组经常v-for结合使用
语法是(item,index)in 数据
item 和 index 可以结合使用其他指令一起使用
数组长度的更新会同步到页面上,是响应式的
- code
<div id="app">
<input type="button" value="增加数据" @click='add'>
<input type="button" value="移除数据" @click='rem'>
<ul>
<li v-for='(item,index) in arr'>
{{index+}} {{item}}
</li>
</ul>
<h1 v-for=' item in age' v-bind:title='item.p'>
{{item.p}}
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:['广东','上海','苏州'],
age:[
{p:""},
{p:''},
{p:""}
]
},
methods:{
add:function(){
this.age.push({p:'岁'})
},
rem:function(){
this.age.shift()
}
}
})
</script>
v-model (双向绑定)
v-model 指令的作用是便捷和获取表单元素的值
绑定的数据和表单值相关联
绑定的数据《》 表单元素的值
- code
<div id="app">
<input type="button" value="修改mesage" @click='Modifies' >
<input type="text" v-model='message' >
<h3>{{message}} </h3> </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"柚子小哥哥"
},
methods:{
Modifies:function(){
this.message='修改内容!'
}
}
})
</script>
总结:
创建vue实例中,el(挂载点),data (数据),methods (方法)
v-on 指令的作用是绑定事件,简写为@
方法中通过this,关键字获取data中的数据
v-text 指令的作用是:设置元素的文本值,简写为{{}}
v-html指令的作用是:设置元素的innerHtml
数量增加的案例
<div id="app">
<button @click="sub">-</button>
<span> {{num}} </span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: ,
},
methods: {
add: function () {
// console.log('add')
if (this.num < ) {
this.num++;
} else {
alert("最多点5下");
}
},
sub: function () {
// console.log('sub')
if (this.num > ) {
this.num--;
} else {
alert("负数点不了");
}
},
},
});
</script>
vue 框架,入门必看的更多相关文章
- Java编程学习知识点分享 入门必看
Java编程学习知识点分享 入门必看 阿尔法颜色组成(alpha color component):颜色组成用来描述颜色的透明度或不透明度.阿尔法组成越高,颜色越不透明. API:应用编程接口.针对软 ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
- Liunx新手入门必看
安装CentOS(Linux的一个常用发行版本,互联网公司经常使用这个发行版)用到的软件: VMware_workstation_full_12.5.2.exe 虚拟机软件,虚拟机由这个软件安装.管理 ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
- vue入门笔记(新手入门必看)
一.什么是Vue? 1. vue为我们提供了构建用户界面的渐进式框架,让我们不再去操作dom元素,直接对数据进行操作,让程序员不再浪费时间和精力在操作dom元素上,解放了双手,程序员只需要关心业 ...
- STM32环境搭建/学习观点/自学方法 入门必看
文章转自armfly开发板V4软件开发手册,分享学习~ 今天有幸看到armfly的开发板软件开发手册,开头的基础知识,真的很有用,还好有看到,一切都不迟,感悟很多,摘抄部分,学习分享~ 关于开发环境的 ...
- Node笔记(新手入门必看)
. 初识Node.js 1.1 Node.js是什么 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. ...
- 三分钟教会你Python数据分析—数据导入,小白基础入门必看内容
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:小白 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行 ...
- HR问了一句DB是啥?SQL是啥?DB是Database数据库,SQL是数据库语言! 然后呢? 数据库从入门到精通--入门必看!
写在前面 本文的写作知识体系来源于我的数据库老师SDAU张承明,部分知识来自于网络,我呢对知识进行了细化和添加了自己的一些看法,并且加入了一些实例帮助理解,本文不是面向SQL高手写的,可以看作是数据库 ...
随机推荐
- 【C++】简介
注意:以下内容摘自文献[1],修改了部分内容. 前言 关于软件产业发展史,不妨访问“首次全面深度解密华为方舟编译器”一文,不仅详细介绍了软件产业的发展,还有华为方舟编译器产生的背景,值得一看! 1. ...
- [工具推荐]_iOS音频批量转换
通常为了便于市场推广和获得更高的下载量,产品安装包的体积是越小越好.那么问题来了,要如何才能做到使安装包的体积最小化呢.根据产品的组成成分,最终可以大概分为,代码,图片,视频,音频等这几部分,今天我们 ...
- RabbitMQ镜像集群搭建
RabbitMQ 官网 https://www.rabbitmq.com/ 小编使用的系统环境是CentOS7.4 系统 IP hostname CentOS7.4 1.1.1.1 hostname0 ...
- upload-labs通关手册
最近在练习文件上传,所以记录一下自己练习的过程,既能帮助自己以后复习,同时也能帮到初学者. 主要用到的工具是Burpsuite.首先我们应该明白上传文件的目的是什么,通过上传文件将web后门上传并被成 ...
- seacms_6.4.5 前台任意代码执行漏洞分析
环境搭建 1.下载安装包 下载地址: 链接:https://pan.baidu.com/s/1uw_VnxnvG4GGEae4TRsGGw 密码:cd48 2.常规安装 漏洞复现 poc1: http ...
- 新手福利!Blazor 从入门到砖家系列教程(你真的可以成为砖家)
注意 作为 Blazor 新手的你(不是新手就当没看到这句话),请一定走完本教程再去上手其他组件库 标题跟你开个玩笑,你真的可以通过这个系列教程成为专家! 深入浅出,我翻译过程中都学到了很多. 我们不 ...
- Java-接口概念辨析
https://mp.weixin.qq.com/s/HQZhlS-ffgEMqhB2rHax1w 1. 类 是属性成员和方法成员的集合:2. 父类 是子类相同属性成员和方法成 ...
- Java实现 蓝桥杯 算法训练 纪念品分组
问题描述 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作.为使得参加晚会的同学所获得的纪念品价值 相对均衡,他要把购来的纪念品根据价格进行分组,但每组最多只能包括两件纪念品,并且每组纪念品的价 ...
- Java实现 蓝桥杯VIP 算法提高 复数求和
算法提高 复数求和 时间限制:1.0s 内存限制:512.0MB 从键盘读入n个复数(实部和虚部都为整数)用链表存储,遍历链表求出n个复数的和并输出. 样例输入: 3 3 4 5 2 1 3 样例输出 ...
- Java实现填符号凑算式
匪警请拨110,即使手机欠费也可拨通! 为了保障社会秩序,保护人民群众生命财产安全,警察叔叔需要与罪犯斗智斗勇,因而需要经常性地进行体力训练和智力训练! 某批警察叔叔正在进行智力训练: 1 2 3 4 ...