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 框架,入门必看的更多相关文章

  1. Java编程学习知识点分享 入门必看

    Java编程学习知识点分享 入门必看 阿尔法颜色组成(alpha color component):颜色组成用来描述颜色的透明度或不透明度.阿尔法组成越高,颜色越不透明. API:应用编程接口.针对软 ...

  2. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  3. Liunx新手入门必看

    安装CentOS(Linux的一个常用发行版本,互联网公司经常使用这个发行版)用到的软件: VMware_workstation_full_12.5.2.exe 虚拟机软件,虚拟机由这个软件安装.管理 ...

  4. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  5. vue入门笔记(新手入门必看)

    一.什么是Vue? 1.    vue为我们提供了构建用户界面的渐进式框架,让我们不再去操作dom元素,直接对数据进行操作,让程序员不再浪费时间和精力在操作dom元素上,解放了双手,程序员只需要关心业 ...

  6. STM32环境搭建/学习观点/自学方法 入门必看

    文章转自armfly开发板V4软件开发手册,分享学习~ 今天有幸看到armfly的开发板软件开发手册,开头的基础知识,真的很有用,还好有看到,一切都不迟,感悟很多,摘抄部分,学习分享~ 关于开发环境的 ...

  7. Node笔记(新手入门必看)

    . 初识Node.js 1.1 Node.js是什么 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. ...

  8. 三分钟教会你Python数据分析—数据导入,小白基础入门必看内容

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:小白 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行 ...

  9. HR问了一句DB是啥?SQL是啥?DB是Database数据库,SQL是数据库语言! 然后呢? 数据库从入门到精通--入门必看!

    写在前面 本文的写作知识体系来源于我的数据库老师SDAU张承明,部分知识来自于网络,我呢对知识进行了细化和添加了自己的一些看法,并且加入了一些实例帮助理解,本文不是面向SQL高手写的,可以看作是数据库 ...

随机推荐

  1. 【C++】简介

    注意:以下内容摘自文献[1],修改了部分内容. 前言 关于软件产业发展史,不妨访问“首次全面深度解密华为方舟编译器”一文,不仅详细介绍了软件产业的发展,还有华为方舟编译器产生的背景,值得一看! 1. ...

  2. [工具推荐]_iOS音频批量转换

    通常为了便于市场推广和获得更高的下载量,产品安装包的体积是越小越好.那么问题来了,要如何才能做到使安装包的体积最小化呢.根据产品的组成成分,最终可以大概分为,代码,图片,视频,音频等这几部分,今天我们 ...

  3. RabbitMQ镜像集群搭建

    RabbitMQ 官网 https://www.rabbitmq.com/ 小编使用的系统环境是CentOS7.4 系统 IP hostname CentOS7.4 1.1.1.1 hostname0 ...

  4. upload-labs通关手册

    最近在练习文件上传,所以记录一下自己练习的过程,既能帮助自己以后复习,同时也能帮到初学者. 主要用到的工具是Burpsuite.首先我们应该明白上传文件的目的是什么,通过上传文件将web后门上传并被成 ...

  5. seacms_6.4.5 前台任意代码执行漏洞分析

    环境搭建 1.下载安装包 下载地址: 链接:https://pan.baidu.com/s/1uw_VnxnvG4GGEae4TRsGGw 密码:cd48 2.常规安装 漏洞复现 poc1: http ...

  6. 新手福利!Blazor 从入门到砖家系列教程(你真的可以成为砖家)

    注意 作为 Blazor 新手的你(不是新手就当没看到这句话),请一定走完本教程再去上手其他组件库 标题跟你开个玩笑,你真的可以通过这个系列教程成为专家! 深入浅出,我翻译过程中都学到了很多. 我们不 ...

  7. Java-接口概念辨析

    https://mp.weixin.qq.com/s/HQZhlS-ffgEMqhB2rHax1w 1. 类        是属性成员和方法成员的集合:2. 父类      是子类相同属性成员和方法成 ...

  8. Java实现 蓝桥杯 算法训练 纪念品分组

    问题描述 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作.为使得参加晚会的同学所获得的纪念品价值 相对均衡,他要把购来的纪念品根据价格进行分组,但每组最多只能包括两件纪念品,并且每组纪念品的价 ...

  9. Java实现 蓝桥杯VIP 算法提高 复数求和

    算法提高 复数求和 时间限制:1.0s 内存限制:512.0MB 从键盘读入n个复数(实部和虚部都为整数)用链表存储,遍历链表求出n个复数的和并输出. 样例输入: 3 3 4 5 2 1 3 样例输出 ...

  10. Java实现填符号凑算式

    匪警请拨110,即使手机欠费也可拨通! 为了保障社会秩序,保护人民群众生命财产安全,警察叔叔需要与罪犯斗智斗勇,因而需要经常性地进行体力训练和智力训练! 某批警察叔叔正在进行智力训练: 1 2 3 4 ...