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高级程序设计>的风格,从浅入深, ...
随机推荐
- 通用分页model封装pageList
package selfimpr.page; import java.util.List; /** * 分页模型 * @param <T> 数据泛型 * @author selfimpr ...
- bat 判断 bat 是否是以管理员权限运行，和自动以管理员权限运行
bat 判断 bat 是否是以管理员权限运行,和自动以管理员权限运行 判断 @echo off net.exe session 1>NUL 2>NUL && ( goto ...
- Selenium（七）多窗口切换、等待方法、alert对话框处理
一.多窗口切换 1.打开百度首页 2.在百度中搜索博客园 3.从搜索结果中跳转到博客园 4.博客园首页和百度搜索页面切换 handle:句柄 二.等待方法 time.sleep(5) 先导入方法 参数 ...
- vue slot及用法，$slots访问具名slot
- Java8-ConcurrentHashMap
import java.util.concurrent.ConcurrentHashMap; import java.util.concurrent.ForkJoinPool; public clas ...
- BZOJ 3884——欧拉降幂和广义欧拉降幂
理论部分 欧拉定理:若 $a,n$ 为正整数,且 $a,n$ 互质,则 $a^{\varphi (n)} \equiv 1(mod \ n)$. 降幂公式: $$a^b=\begin{cases}a^ ...
- Luogu SP839 OPTM - Optimal Marks(按位最小割)
这道题和 BZOJ 2400 是一道题,不多讲了 CODE #include <cstdio> #include <cstring> #include <vector&g ...
- final详解
final的含义? final:java中的关键字,意为“终态的”或者“无法改变的”.可用来修饰类.变量.方法. 变量(成员变量.静态变量.局部变量) 注意: 1.final变量即为常量,通常常量名大 ...
- UEditor粘贴word
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码 目前限chrome浏览器使用 首先以um-editor的二进制流保存为例: 打开umeditor.js,找 ...
- 逆元 x
逆元: 丢线 1.首先定义: 若存在正整数a,x,m,且满足ax≡1(mod m),则称a是x的乘法逆元,或称x是a的乘法逆元. Eg: 模7意义下,3的乘法逆元是5(或模7意义下,5的乘法逆元是3) ...