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高级程序设计>的风格,从浅入深, ...
随机推荐
- springboot @value 注解的使用
1,通过@value来注入对应的值,直接在字段上添加@value 获取application.properties文件中的值. @Configuration public class DemoConf ...
- Centos杀死进程kill方法大全
杀死进程最安全的方法是单纯使用kill命令. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通常都能达到目的.终止有问题的进程,并 ...
- MySql忘记密码了咋办
对内 忘记密码终端修改操作: #停止mysql服务 sudo /opt/lampp/lampp stopmysql #参数启动mysqld sudo /opt/lampp/sbin/mysqld -- ...
- 手把手教你在CentOS上搭建Kubernetes集群
作者:ChamPly 安装CentOS 1.安装net-tools [root@localhost ~]# yum install -y net-tools 2.关闭firewalld [root@l ...
- linux实操_shell系统函数
basename函数: 功能:返回完整路径最后/的后面部分,常用于获取文件名. 基本语法: basename 路径 后缀 不加后缀:运行后 加后缀:运行后 dirname函数: 功能:返回完整路径最后 ...
- lnmp安装xdebug ，配合phpstorm断点调试
先下载xdebug wget http://www.xdebug.org/files/xdebug-2.2.3.tgz 然后开始编译(权限不够的加上 sudo 提成权限) tar xzf xdebug ...
- UEditor设置内容setContent()失效的解决方法
ueditor常见用法: https://blog.csdn.net/qq_31879707/article/details/54894735#UE.Editor:setContent() UEdit ...
- 处理 read_csv 报错 OSError:Initializing from file failed
1.问题发现 df=pd.read_csv("X-go报表_交易20191118.csv") print(df.info()) File "pandas/_libs/pa ...
- System.Web.HttpRequestValidationException: 从客户端(name="<a href=''>我是晓菜鸟</a>")中检测到有潜在危险的 Request.Form 值
这是一个比较常见的问题了,如果Web表单中有输入类似于 Html 标签之类的文本,在通过 Request.QueryString 或者 Request.Form 传递这些值的时候,就会触发这样的异常, ...
- FOR XML PATH 函数用法
一.FOR XML PATH 简单介绍 那么还是首先来介绍一下FOR XML PATH ,假设现在有一张兴趣爱好表(hobby)用来存放兴趣爱好,表结构如下: 接下来我们来看 ...