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高级程序设计>的风格,从浅入深, ...
随机推荐
- Wireless Network（并查集）
POJ - 2236 #include<iostream> #include<algorithm> #include<cstring> #include<cm ...
- 如何让DEV跳出的“提示试用版”的对话框不再显示
在 使用DevExpress控件的时候.每次对窗体进行更改的时候,都会出现一个对话框.发布的时候 也会出现一个对话框.之前的解决方法是在发布的时候把licenses.licx给删除掉,但是这个方法治标 ...
- 使用python批量造测试数据
# -*- coding:utf-8 -*- import json import os import time class Virtual_Data: def __init__(self): sel ...
- Spring Boot常用的注解
@SpringBootApplication:包含@Configuration.@EnableAutoConfiguration.@ComponentScan通常用在主类上.由于大量项目都会在主要的配 ...
- C# Stopwatch 使用
static IEnumerable<int> SampleData() { ; var r = new Random(); , arraySize).Select(x => r.N ...
- [git]一个本地仓库，多个远程仓库
操作步骤如下: 1. 克隆某个远程仓库的代码到本地 git clone http://...... // 或者 git clone git@.... 2. 查看当前远程仓库地址 // 查看需要添加的远 ...
- Spring boot请求参数
GET请求: 1.restful风格: @GetMapping("/order/detail") public BaseOutput omsQueryDetail(@Request ...
- java常用函数
if(null == list || list.size() ==0 ){ } list.isEmpty()和list.size()==0 没有区别 isEmpty()判断有没有元素而size()返回 ...
- java http 上传文件夹
用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/1269085759/up6-jsp-mysq ...
- 更改用户id 和组id
转自 http://blog.csdn.net/todd911/article/details/16370577 在unix系统中,特权是基于用户和组ID的,当程序需要增加特权,或需要访问当前并不允许 ...