千锋教育Vue组件--vue基础的方法
课程地址:
https://ke.qq.com/course/251029#term_id=100295989
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue基础的方法</title>
<link rel="stylesheet" href="">
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
<style type="text/css">
.test{
background-color:yellow;
}
.test2{
font-size: 40px;
}
.green{
color: green;
}
</style>
</head>
<body>
<div id="vue">
<h1 >{{message}}</h1>
<hr>
<!--调用messageReverse方法-->
<span>{{messageReverse}}</span>
<hr>
<!--v-on:click可以写成@click v-bind:title可以写成:title-->
<!--v-model="message"绑定上之后,message相当于传值引用的关系，message的改变会影响到所有引用它的地方-->
<!--lazy当值改变时,失去焦点时才触发-->
<input type="text" v-model.lazy="message" :class="hd" @click="changBgColor" :title="message">
</div>
</body>
<script type="text/javascript">
var app=new Vue({
el:'#vue',
data:{
message:'hello vue!!!',
hd:{test:false,test2:false,green:true},
},
//计算方法
computed:{
messageReverse:function(){
return this.message.split('').reverse().join('');
},
},
//方法
methods:{
//方法一:
changBgColor(ev){
ev.target.style.background = 'red';
//调用下面的changBgColor2方法
this.changBgColor2()
},
//方法二
changBgColor2(){
this.hd.test=true;
this.hd.test2=true;
this.hd.green=false;
},
},
//初始化时,会自动执行 只是初始化时会执行一次
mounted(){
console.log('自动执行');
},
//数据改变时执行
updated(){
console.log('数据改变时执行');
},
//监听data里的word的变化,实时监听message的变化,
//把input里加上lazy失去焦点时才改变message里的值,这样可以节省资源
watch:{
message(v_new,v_old){
console.log(v_new);
console.log(v_old);
}
},
});
</script>
</html>
效果:
千锋教育Vue组件--vue基础的方法的更多相关文章
- HTML5从入门到精通（千锋教育）免费电子版+PDF下载
本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...
- Vue组件的基础用法（火柴）
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
- Vue组件使用基础
这篇博文用来记录 .vue 组件的使用方法. 可以把组件代码按照 template.style.script 的拆分方式,放置到对应的 .vue 文件中. 模板(template).初始数据(data ...
- html中创建并调用vue组件的几种方法
最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...
- vue组件挂载到全局方法
在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像eleme ...
- webpack的单vue组件(.vue)加载sass配置
在通过vue-cli安装了webpack-simple 后,就自动安装好vue-loader了,但此时若写了含有sass的.vue组件,运行npm run dev时会报错.此时,需要我们在webpac ...
- Vue组件通信父传方法给子组件调用
// 父组件中将 :meth='changeCom1' 传入入子组件 , 子组件运行 meth(i) 方法 并给他传参数 ,在父组件可以获取这个参数,并做相应的操作 // 父组件 <temp ...
- Vue 组件的基础介绍
1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
随机推荐
- git 突破大文件上传限制
1.安装 lfs: git lfs install 2.跟踪大文件:git lfs track "file.suffix" 3.添加配置文件:git add .gitattribu ...
- 浏览器缓存介绍之sessionStorage、localStorage、Cookie
Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信 ...
- cube.js 开源模块化分析框架
cube.js 是一款很不错的模块化web 应用分析框架.cube.js 的设计主要是面向serverless 服务, 但是同时也支持所有rdbms, cube.js不是一个单体应用,包含了以下部分: ...
- better-scroll 遇到的问题 3 （transition-group 相关）
今天在使用vue动画 transition-group 和 better-scroll 的时候,出现了下拉列表不能滚动的问题. 问题描述: 我写了一个scroll的基础组件,组件接受一个data参数, ...
- 获取iframe子页面节点，响应浏览器宽高
获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...
- eclipse中安装thymeleaf插件完成thymeleaf模板中自动代码提示功能
插件地址:https://github.com/thymeleaf/thymeleaf-extras-eclipse-plugin 页面有介绍如何使用:
- Java—封装
封装 将类的某些信息隐藏在类的内部,不允许外部程序直接访问,而是通过该类提供的方法类实现对隐藏信息的操作和访问. 封装的实现步骤:修改属性的可见性(设为private)=>创建setter和ge ...
- Thymeleaf 随记
一.基础写法: th:text='${数据} ,其中text可以修改成其他,如href,value,class....看需求 <p th:text='${后台返回的数据}'>静态文本&l ...
- traffic_light_bag_file 数据集 下载链接
链接:https://pan.baidu.com/s/19p5aGRfs6iFtN_SWAxCkRQ 密码:v9wx
- C#调用C++的dll存在的问题
C#调用C++写的DLL时,在C#程序中,使用DllImport定义C++导出函数的定义信息,之前在C++中定义导出函数时,使用了long作为参数类型,使用C#调用时,开始在64位版本是哪个测试,一切 ...