vue使用(二)
本节目标:
1.数据路径的三种方式
2.{{}}和v-html的区别
1.绑定图片的路径
方法一:直接写路径
<img src="http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg">
方法二:在data中写路径,在div中使用
<img v-bind:src="url">
然后在data中写路径
data () {
return {
msg:'你好,我是啦啦啦!',
url:'http://pic.baike.soso.com/p/20140109/20140109142534-188809525.jpg',
}
}
方法三:这个和方法二一样,变化的为红色标注部分
<img :src="url">
2。使用{{}}和使用v-html的区别
使用{{}}的时候数据会原样输出,使用v-html的使用会将特殊字符进行解析成html,然后显示。
这种方式是将他们的数据直接输出,并没有达到我们想要的解析
{{h}}
<hr/>
下面的方法可以解决问题
<div v-html="h"></div>
3.绑定数据的第二种方法
绑定数据的第二种方法是
<div v-text="msg"> </div>
4.绑定样式
<hr/>
绑定样式的使用
<div v-bind:class="{'red':flag}">
我是渣渣!
</div>
也可以写成简单的形式,将v-bind:直接写成:
5.方法的调用
(1)无参数的调用
<button v-on:click="getmsg()">我是按钮!</button>
对于这个注意下面的写法
methods:{
getmsg(){
/*alert('方法执行!');*/
alert(this.msg);
}
方法调用写在methods中。
(2) 有参数方法的调用
<button @click="fun04('1111')">
fun04(val)
{
alert(val);
}
6.动态值的绑定,就是数据只要发生变化,使用此变量值的地方都会发生变化。
{{msg}}只要数据发生改变,这里的值也会发生改变
<button v-on:click="setmsg()">我是改变</button>
methods的写法
setmsg(){
/*alert('方法执行!');*/
this.msg="我是渣渣!"
}
7.ref获取值,并显示
<input type="text" ref="info"/>
获取值
this.$refs.info
显示值(这个使用到了上面的动态值绑定,只要值发生改变,启用的地方就会发生变化)
<div ref="box">我是;啦啦啦</div>
this.$refs.box.style.background='this.$refs.info.value';
设置背景色
this.$refs.box.style.background='red';
8.历史值的获取
我们有时候在页面上显示数据的时候,当我们刷新之后,数据就会消失,所以我们可以使用声明周期函数,将数据加入到声明周期中进行保存,在刷新之后,可以重新的显示数据
数据
data () {
return {
todo:'dsfh',
list:[],
ok:true
}
}
methods:{
doAdd(){
this.list.push(this.todo);
localStorage.setItem('list',JSON.stringify(this.list));
},deelete(val){
//在某个位置上删除数据
this.list.splice(val,);
localStorage.setItem('list',JSON.stringify(this.list)) ;
/*this.list.pop(val);*/
/*上面的两个方法是相同的 */
}
}
红色的是将值保存起来,当我们刷新出发声明周期方法,
mounted()
{ var list = JSON.parse(localStorage.getItem('list'));
alert(list);
if(list)
{
this.list = list;将数据设置回list中去
}
}
9.组件的使用
(1)创建一个组件
<template>
<!--所有的内容需要被div包含起来-->
<div id="home">
<h2>这是一个组件</h2>
{{msg}}
</div>
</template>
<!--在组件中也是可以放入业务逻辑的-->
<script>
export default{
data(){
return{
msg:'我是啦啦啦!'
}
}
}
</script>
<!--scoped表示局部作用域 -->
<style lang="scss" scoped>
</style>
(2)将组件引入
import Home from './component/Home.vue';
(3)将组件挂载
components:{
/**
* 2.挂载组件
*/
'v-home':Home,
'v-news':News
}
(4)使用组件
<v-home></v-home>
10,生命周期函数
这个比较简单
vue使用(二)的更多相关文章
- 一天带你入门到放弃vue.js(二)
接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 前端笔记之Vue(二)组件&案例&props&计算属性
一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...
- Vue(二十七)当前GitHub上排名前十的热门Vue项目(转载)
原文地址:https://my.oschina.net/liuyuantao/blog/1510726 1. ElemeFE/element tag:vue javascript components ...
- vue.js 二维码生成组件
安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...
- vue(基础二)_组件,过滤器,具名插槽
一.前言 主要包括: 1.组件(全局组件和局部组件) 2.父组件和子组件之间的通信(单层) 3.插槽和具名插槽 ...
- VUE 生成二维码(qrcodejs)
1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...
- Vue(二十三)vuex + axios + 缓存 运用 (以登陆功能为例)
(一)axios 封装 (1)axios拦截器 可以在axios中加入加载的代码... (2)封装请求 后期每个请求接口都可以写在这个里面... (二)vuex user.js import { lo ...
随机推荐
- 【福利】微信小程序130个精选Demo合集
小编最近在开发小程序,也读到了不少优秀的小程序源码,项目中有些需求可以直接从源码里粘贴复制过来,虽然这样做不利于自己独立编写代码,但比较是给公司做项目啊,秉着效率第一的原则,简直没有什么比ctrl+c ...
- 洛谷—— P2580 于是他错误的点名开始了
https://www.luogu.org/problem/show?pid=2580 题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次 ...
- openstack-dashboard开发环境搭建
1,在开发过程中,一般都要,将dashboard这个组件单独执行在自己的本地的linux系统中(Ubuntu或centos),那个比較顺手用哪个.假设不习惯,能够用vmwareworkstation安 ...
- SSM(spring,springMVC,Mybatis)框架的整合
这几天想做一个小项目,所以搭建了一个SSM框架. 1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Joh ...
- How to install Armbian on Orange Pi Plus 2e
bian on Orange Pi Plus 2e How to install Armbian on Orange Pi Plus 2e Armbian on the microSD You jus ...
- js的类和继承
因为我使用java语言入门的编程,所以对javascript的类和继承有种想当然一样,或者是差不多的感觉,但实际上两者还是有很多不同的 首先我们说类,javascript中类的实现是基于原型继承机制的 ...
- spring源码分析之@Conditional
根源在AnnotationConfigApplicationContext和AnnotationConfigWebApplicationContext,以AnnotationConfigApplica ...
- Json应用案例
Json应用案例之FastJson 这几天在网上找关于Json的一些案例,无意当中找到了一个我个人感觉比较好的就是阿里巴巴工程师写的FastJson. package com.jerehedu.f ...
- id---显示用户ID
d命令 id命令可以显示真实有效的用户ID(UID)和组ID(GID).UID 是对一个用户的单一身份标识.组ID(GID)则对应多个UID 语法 id [-gGnru][--help][--ve ...
- hdu 1233 还是畅通project (克鲁斯卡尔裸题)
还是畅通project Time Limit: 4000/2000 MS (Java/Others) M ...