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高级程序设计>的风格,从浅入深, ...
随机推荐
- Python3+Appium学习笔记06-noReset参数
百度很多文章说noReset这个参数是用来防止重复安装app的.可能这是以前的用法.目前最新版本appium默认是清除session信息,并且不会删除应用的. noReset这个参数,根据appi ...
- Java基础 线程的通信的三个方法/ 交替数数线程 / 生产者&消费者线程问题
线程通讯笔记: /** 线程通信 三个方法: * wait(): 调用该方法 是该调用的方法的线程释放共享资源的锁,进入等待状态,直至被唤醒 * notify() : 可以唤醒队列中的第一个等待同一共 ...
- 2018/7/31-zznu-oj-问题 B: N! 普拉斯 -【求大数的阶乘-ll存不下-然后取尾零的个数输出-暴力模拟】
问题 B: N! 普拉斯 时间限制: 1 Sec 内存限制: 128 MB提交: 114 解决: 35[提交] [状态] [讨论版] [命题人:admin] 题目描述 在处理阶乘时也需要借助计算器 ...
- go deep copy map
func deepCopyJSON(src map[string]interface{}, dest map[string]interface{}) error { if src == nil { r ...
- 牛客算法：DNA序列
import java.util.*; public class Main{ public static void main(String[] args){ try(Scanner in = new ...
- Python3基础学习-while循环实例- 猜数字游戏
需求: 猜数字游戏, 要求如下: 给个数字, 比如是66. 让用户一直猜,直到猜对退出. 中间输入q或Q也能退出 如果猜大了,提示用户猜小一点; 如果猜小了,提示用户猜大一点; likely = 66 ...
- vs2008重置方法
开始->Microsoft Visual Studio 2008->Visual Studio Tools->Visual Studio 2008 命令提示 然后依次键入如下命令: ...
- Longest Common Subsequence (DP)
Given two strings, find the longest common subsequence (LCS). Your code should return the length of ...
- 类对象传输到jsp页面。需要转换为js的json对象时，这么做。
场景:要从一个列表中选择信息,填写入父页面的表单中,但是字段非常多... 后台查询,得到结果,放在列表中. 效果:点击选择产品.. 弹出页面:点击后面的选择产品 选择产品后:信息自动填充.. 实现:点 ...
- C语言学习系列（六）基本语法
一.C运算符 算术运算符(语法和java类似或基本一样略过不再描述) 关系运算符(略) 逻辑运算符(略) 位运算符 运算符 描述 实例 & 如果同时存在于两个操作数中,二进制 AND 运算符复 ...