Vue的基础学习
一.Vue的计算属性：get和set属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的计算属性</title>
</head>
<body>
<div id="app">
<p>初始值：{{name}}</p>
<!-- 字符串的反转 gnep is-->
<p>
反转字符串：{{name.split('').reverse().join('')}}
</p>
<p>函数调用：{{this.reverseStr()}}</p>
<p>计算属性get调用：{{reverse}}</p>
<button @click="deal()">调用计算属性的set方法</button>
</div>
<script src="js/vue.js"></script>
<script>
// 创建vue的实例
let vm = new Vue({
el: '#app',
data: {
name: 'si peng'
},
methods: {
reverseStr() {
return this.name.split('').reverse().join('')
}, // set方法
deal() {
this.name = "si---si"; // 调用setter方法
}
},
// 计算属性
computed: {
// get方法
reverse() {
return this.name.split('').reverse().join('')
}
}, name: {
get() {
return this.name.split('').reverse().join('')
},
// set方法
set(str) {
// alert(0);
this.name = str;
}
}
});
</script>
</body>
</html>
二.Vue的全局组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的全局组件</title>
</head>
<body>
<div id="app">
<!-- .调用全局组件 -->
<my-date></my-date>
<my-date></my-date>
</div> <div id="app1">
<!-- .调用全局组件 -->
<my-date></my-date>
<my-date></my-date>
</div>
<script src="js/vue.js"></script>
<script>
// 1.创建组件构造器
let profile = Vue.extend({
// 1.1模版选项
template:`
<div>
<input type='date'>
<p>今天已经是冬天了</p>
</div>
`
}); // 2.注册全局的组件
Vue.component('my-date', profile); // 创建vue的实例
let vm = new Vue({
el: '#app',
data: {
name: 'si peng'
},
}); let vm1 = new Vue({
el: '#app1',
data: {
name: 'si peng'
},
});
</script>
</body>
</html>
三.Vue的局部组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的局部组件</title>
</head>
<body>
<div id="app">
<my-date></my-date>
<my-color></my-color>
</div>
<!-- 这里调用不到的，会报错 -->
<div id="app1">
<my-date></my-date>
<my-color></my-color>
</div>
<script src="js/vue.js"></script>
<script> // 1.创建组件构造器
let profile = Vue.extend({
// 1.1模版选项
template:`
<div>
<input type='date'>
<p>今天已经是冬天了</p>
</div>
`
}); let profile2 = Vue.extend({
// 1.1模版选项
template:`
<div>
<input type='color'>
<p>我是色板</p>
</div>
`
}); // 创建vue的实例
let vm = new Vue({
el: '#app',
data: {
name: 'si peng'
}, components: {
'my-date': profile,
'my-color': profile2
}
}); // 创建vue的实例
let vm1 = new Vue({
el: '#app1',
data: {
name: 'si peng'
},
});
</script>
</body>
</html>
简便写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的局部组件</title>
</head>
<body>
<div id="app">
<my-date></my-date>
<my-color></my-color>
</div>
<!-- 这里调用不到的，会报错 -->
<div id="app1">
<my-date></my-date>
<my-color></my-color>
</div>
<script src="js/vue.js"></script>
<script> // 1.创建组件构造器
let profile = Vue.extend(); let profile2 = Vue.extend({
// 1.1模版选项
template:`
<div>
<input type='color'>
<p>我是色板</p>
</div>
`
}); // 创建vue的实例
let vm = new Vue({
el: '#app',
data: {
name: 'si peng'
}, components: {
'my-date': {
// 1.1模版选项
template:`
<div>
<input type='date'>
<p>今天已经是冬天了</p>
</div>
`
},
'my-color': profile2
}
}); // 创建vue的实例
let vm1 = new Vue({
el: '#app1',
data: {
name: 'si peng'
},
});
</script>
</body>
</html>
四.Vue的父子组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的全局组件</title>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="js/vue.js"></script>
<script> // 1.创建组件构造器
let child1 = Vue.extend({
// 1.1模版选项
template:`
<div>
<img src="data:images/3.jpeg" width=""></img>
</div>
`
}); // 1.创建组件构造器
let child2 = Vue.extend({
// 1.1模版选项
template:`
<div>
<p>思思美美哒！</p>
</div>
`
}); // 2.父组件构造器
Vue.component('parent', {
components: {
'my-child1': child1,
'my-child2': child2
},
template: `
<div>
<my-child1> </my-child1>
<my-child2> </my-child2>
</div>
`
}) // 创建vue的实例
let vm = new Vue({
el: '#app',
data: {
name: 'si peng'
},
});
</script>
</body>
</html>
五.Vue的teplate标签和script标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的template标签和script标签</title>
</head>
<body>
<div id="app">
<div>
<my-div>
</my-div>
</div>
<!-- template标签 -->
<!-- <template id='my-div'>
<div>我是思思</div>
<div>我是思思2</div>
</template> --> <!-- script标签 -->
<script type=“text/template” id='my-div'>
<div>
<p>思思，你好啊！</p>
</div>
</script>
</div>
<script src="js/vue.js"></script>
<script> // 实例化组件
Vue.component('my-div', { template: '#my-div'
}); // 创建vue的实例
let vm = new Vue({
el: '#app',
data: {
name: 'si peng'
},
});
</script>
</body>
</html>
开发中使用更多的是template标签定义子组件。
六.Vue中的data选项注意事项：
// 实例化组件
Vue.component('my-div', { template: '#my-div',
// 1.这样使用会报错！
// data: {
// message: '思思',
// }
// 2.这样才是正确的，data必须以函数设置
data() {
return {
maessage: '思思'
}
}
});
Vue的基础学习的更多相关文章
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- vue零基础学习--搭建项目
一.script引入(联系使用,小型项目) 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量. <script src="https://cdn.j ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- Vue前端基础学习
vue-cli vue-cli 官方提供的一个脚手架(预先定义好的目录结构及基础代码,咱们在创建Maven项目的时可以选择创建一个骨架项目,这个骨架项目就是脚手架),用于快速生成一个vue项目模板 主 ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- vue.js基础学习（2）
vm=new vue({ date:{name:"aa", user:{“name”:"lsm"}}); 获取属性值 1:vm.name 2:vm.$data. ...
- vue.js基础学习（1）
一:v-cloak:解决浏览器闪烁,编译过程中不会显示,直到编译结束才显示. 用法:[v-cloak] { display: none;} <div v-cloak> {{ message ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
随机推荐
- less混合
混合(mixin)变量 .border{ border: 5px solid pink; } .box{ width: 300px;height:300px; .border; } => .bo ...
- Sql中的主键和外键
SQL的主键和外键的作用: 外键取值规则:空值或参照的主键值. (1)插入非空值时,如果主键表中没有这个值,则不能插入. (2)更新时,不能改为主键表中没有的值. (3)删除主键表记录时,你可以在建外 ...
- JSP网页中文乱码
在编程过程中总是由于各种原因出现中文乱码.最好的解决方法就是把代码中所有编码格式全部设置为UTF-8,这样一般能解决大部分问题,但是今天我发现另外一种情况.我们都知道当一个jsp文件中全部都是html ...
- Appium自动化测试教程-自学网-monkey参数
monkey 参数 参数分类 · 常规类参数 · 事件类参数 · 约束类参数 · 调试类参数 常规类参数 常规类参数包括帮助参数和日志信息参数.帮助参数用于输出Monkey命令使用指导:日志信息参数将 ...
- sql server 复习笔记1
查询数据库是否存在: if DB_ID("testDB")is not null; 检查表是否存在: if OBJECT_ID(“textDB”,“U”) is not null ...
- Vue 组件中锚点定位的问题
1 当前组件的顶部 this.$el.scrollIntoView() 2 指定的 Element this.$el.querySelector(selector).scrollIntoView() ...
- I have Flash Player installed, but I am unable to view Flash content in Chromium. How do I enable Flash Player to view this content?
I have Flash Player installed, but I am unable to view Flash content in Chromium. How do I enable Fl ...
- 四十九. Zabbix报警机制 、 Zabbix进阶操作 、 监控案例
案例1:实现Zabbix报警功能 案例2:Zabbix自动发现 案例3:Zabbix主动监控 案例4:拓扑图与聚合图形 案例5:自定义监控案例 1 案例1:实现Zabbix报警功能 1.1 问题 沿用 ...
- web文件夹上传
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- MySQL备忘点（上）
给自己看的,所以以举例子为主了 检索数据 SELECT 检索单列 SELECT name FROM student 检索多列 SELECT no, name FROM student 检索所有列 S ...