07-Vue的基础使用
vue的介绍
渐进式的JavaScript框架
vue react angualr 作者:尤雨溪 facebook 谷歌公司 文档:中文 建议:如果你想学好vue
1.看视频 初步的了解vue
2.学vue的课 时刻看官网文档 https://cn.vuejs.org/
前端框架和库的区别
功能上的不同
jquery库:包含DOM(操作DOM)+请求,就是一块功能。
art-template库:模板引擎渲染,高性能的渲染DOM (我们后端的一种模板 跟python的模板类似)
框架:大而全的概念,简易的DOM体验+请求处理+模板引擎
在KFC的世界里,库就是一个小套餐,框架就是全家桶。
代码上的不同
一般使用库的代码,是调用某个函数或者直接使用抛出来的对象,我们自己处理库中的代码。
一般使用框架,其框架本身提供的好的成套的工具帮我们运行我们编写好的代码。
框架的使用
- 初始化自身的一些行为
- 执行你所编写的代码
- 释放一些资源
nodejs
去官网https://nodejs.org/en/download/ 下载 安装(傻瓜式安装)
打开终端 cmd : 执行
node -v
如果出现版本号,证明安装node成功 ,跟安装python雷同下载完node之后,会自带包管理器 npm,好比 是python中 pip3包管理器。pip3 install xxx
使用npm
1.要初始化npm的项目 :
npm init --yes
自动生成一个package.json文件
```
javascript
{
"name": "vue_lesson",
"version": "1.0.0", "description": "这是我的vue的第一个项目",
"main": "index.js",
"scripts": { "test": "echo "Error: no test specified" && exit 1" },
"author": "mjj",
"license": "ISC",
"dependencies": { "vue": "^2.5.16" }
}
```
2.下载依赖包
npm install vue --save
npm install jquery --save
3.卸载包 npm uninstall vue --save
4.下载所有的依赖包 npm install
vue的起步
- 引包:
- 创建实例化对象
new Vue({
el:'#app',//目的地
data:{
msg:"hello Vue"
}
});
/*
{{}}: 模板语法插值
{{变量}}
{{1+1}}
{{'hello'}}
{{函数的调用}}
{{1==1?'真的':'假的'}}
*/
指令系统
//常用
v-text
v-html
v-if
v-show
v-for
v-bind
v-on
表单控件的value (看后面)
v-if和v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 //保存数组或者对象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是数组中每项元素
<a href="" class='box'></a>
<img src="" alt="">
使用v-bind:class = '{}||[]||变量名||常量' 对我们的页面中标签的属性进行绑定 所有的属性都可以进行绑定,注意只要使用了v-bind 后面的字符串一定是数据属性中的值
### v-on、v-bind、v-for
// 1.事件源 2.事件 3.事件驱动程序
vue中使用v-on:click对当前DOM绑定click事件 注意:所有的原生js的事件使用v-on都可以绑定 v-if和v-on 来对页面中DOM进行操作 v-bind:class和v-on对页面中DOM的样式切换 v-bind和v-on 在vue中它可以简写: v-bind:
:class 等价于 v-bind:class
:src 等价于v-bind:src
:id 等价于v-bind:id
v-on:click 等价于 @click = '方法名'
v-text v-html {{}}: 对页面的dom进行赋值运算 相当与js中innerText innerHTML v-if = 'true':
//创建
var oP = document.createElement('p') ;
oDiv.appendChild(op) v-if = 'false'
//销毁
oDiv.removeChild(op)
v-show = 'true'
oDiv.style.display = 'block'
v-show:'true'
oDid.style.display = 'none' v-bind:class
oDiv.className += ' active' /*
渐进式的JavaScript框架
做加法和做减法:大部分的人觉得做加法简单,做减法难
vue这个框架 将 做减法的事情都给咱们做了(难的部分)
学习简单的部分就能实现复杂的dom操作
*/
组件的使用
局部组件的使用
打油诗: 1.声子 2.挂子 3.用
var App = {
tempalte:`
<div class='app'></div>`
}; //2.挂子 new Vue({
el:"#app",
//用子
template:<App />
components:{
App
} })
(1)父组件向子组件传递数据:通过Prop
1.在子组件自定义特性。props:['自定义的属性1','自定义属性2'] 当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样
2.要在父组件中导入的子组件内部 绑定自定义的属性 <Vheader :title = '父组件中data声明的数据属性'/>
(2)如何从子组件传递数据到父组件
1.给子组件中的某个按钮绑定原声事件,。我们可以调用内建的 this.$emit('自定义的事件名','传递的数据'),来向父级组件触发一个自定义的事件. 2.在父组件中的子组件标签中 要绑定自定义的事件,
全局组件的使用
Vue.component('全局组件的名字',{
跟new Vue() 实例化对象中的options是一样,但是要注意:
不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {}
})
<slot> 元素作为承载分发内容的出口
过滤器的使用
局部过滤器
//1.注册局部过滤器 在组件对象中定义
filters:{
'过滤器的名字':function(value){
}
}
//2.使用过滤器 使用管道符 |
{{price | '过滤器的名字'}}
全局过滤器
// 注册全局的过滤器
//第一个参数是过滤器的名字,第二个参数是执行的操作 Vue.filter('reverse',function(value) {
return value.split('').reverse().join('');
}); //使用跟 局部过滤器一样
计算属性computed和侦听器(watch)
侦听的是单个属性
watch:{ 数据属性的名字:function(value){ },
数据属性的名字2:function(value){ }
}
侦听多个属性:计算属性 computed
{{str.split('').reverse().join('')}}
计算属性 :默认只有getter方法 data(){ return { name:'alex', age:18 } } compuetd:{ key:value 计算属性的方法名:funtion(){ return ${this.name}他的年龄是${this.age}岁 } } var musicData = [ { id:1, name:'于荣光 - 少林英雄', author:'于荣光', songSrc:'./static/于荣光 - 少林英雄.mp3' }, { id:2, name:'Joel Adams - Please Dont Go', author:'Joel Adams', songSrc:'./static/Joel Adams - Please Dont Go.mp3' }, { id:3, name:'MKJ - Time', author:'MKJ', songSrc:'./static/MKJ - Time.mp3' }, { id:4,name:'Russ - Psycho (Pt. 2)', author:'Russ', songSrc:'./static/Russ - Psycho (Pt. 2).mp3' } ];
生命周期(钩子函数)
beforeCreate(){ // 组件创建之前 console.log(this.msg); }, created(){ // 组件创建之后 // 使用该组件,就会触发以上的钩子函数,created中可以操作数据,发送ajax,并且可以实现vue==》页面的影响 应用:发送ajax请求 console.log(this.msg); // this.msg = '嘿嘿黑'; }, beforeMount(){ // 装载数据到DOM之前会调用 console.log(document.getElementById('app')); }, mounted(){ // 这个地方可以操作DOM // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素,vue操作以后的DOM console.log(document.getElementById('app')); }, beforeUpdate(){ // 在更新之前,调用此钩子,应用:获取原始的DOM console.log(document.getElementById('app').innerHTML); }, updated(){ // 在更新之前,调用此钩子,应用:获取最新的DOM console.log(document.getElementById('app').innerHTML); }, beforeDestroy(){ console.log('beforeDestroy'); }, destroyed(){ console.log('destroyed'); }, activated(){ console.log('组件被激活了'); }, deactivated(){ console.log('组件被停用了'); }
$属性
- $refs获取组件内的元素
- $parent:获取当前组件的父组件
- $children:获取当前组件的子组件
- $root:获取New Vue的实例化对象
- $el:获取组件对象的DOM元素
获取更新之后的dom添加事件的特殊情况
$nextTick 是在下次Dom更新循环结束之后执行的延迟回调,在修改数据之后使用$nextTick ,则可以在回调中获取更新之后的DOM
07-Vue的基础使用的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- 一个综合实例讲解vue的基础知识点。
本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue组件基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- Vue入门基础(火柴)
前言 由于个人十分欣赏博友——小火柴的蓝色理想,他的博文我看了大多数,觉得十分的精彩,然而很多都是看后即忘.我想除了没有经常动手敲代码,更可能是在看的时候忽略了很多细节,因此打算把他的博文通通给“抄袭 ...
- Django 07 Django模型基础2 (常用查询和多表关联)
Django 07 Django模型基础2 (常用查询和多表关联) 一.常用查询 #查找数据 def search_user(request): #获取 rs = User.objects.first ...
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- vue入门基础知识点测试
vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...
随机推荐
- [Swift]LeetCode200.岛屿的个数 | Number of Islands
Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...
- java 随机数产生 常用类及方法
1.Random类 Random():创建一个新的随机数生成器. new一个Random类的对象: Random r = new Random(); 利用该对象产生一个随机整数:常用nextInt,不 ...
- solr索引报错(java.lang.OutOfMemoryError:GC overhead limit exceeded)
配置文件修改如下: <dataSource driver="com.mysql.jdbc.Driver" url="jdbc:mysql://localhost:3 ...
- Java__线程---基础知识全面实战---坦克大战系列为例
今天想将自己去年自己编写的坦克大战的代码与大家分享一下,主要面向学习过java但对java运用并不是很熟悉的同学,该编程代码基本上涉及了java基础知识的各个方面,大家可以通过练习该程序对自己的jav ...
- SpringBoot入门教程(十七)@Service、@Controller、@Repository、@Component
spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller.在目前的 Spring ...
- 使用Flume消费Kafka数据到HDFS
1.概述 对于数据的转发,Kafka是一个不错的选择.Kafka能够装载数据到消息队列,然后等待其他业务场景去消费这些数据,Kafka的应用接口API非常的丰富,支持各种存储介质,例如HDFS.HBa ...
- linux centos 安装Jenkins(非docker方式)
写在前面 我之前写过Asp.net Core 使用Jenkins + Dockor 实现持续集成.自动化部署(一):Jenkins安装这jenkisn的安装过程,但这篇使用的是docker的方式安装的 ...
- Config Server高可用
一 简介构建高可用的Config Server集群,包括Config Server的高可用,以及依赖Git仓库的高可用. 二 Git仓库的高可用由于配置的内容都存储在Git仓库中,所以要想实现Conf ...
- RabbitMQ消息队列(四)-服务详细配置与日常监控管理
RabbitMQ服务管理 启动服务:rabbitmq-server -detached[ /usr/local/rabbitmq/sbin/rabbitmq-server -detached ] 查看 ...
- 图像处理基础(2):自适应中值滤波器(基于OpenCV实现)
本文主要介绍了自适应的中值滤波器,并基于OpenCV实现了该滤波器,并且将自适应的中值滤波器和常规的中值滤波器对不同概率的椒盐噪声的过滤效果进行了对比.最后,对中值滤波器的优缺点了进行了总结. 空间滤 ...