两年前入了个门，很久没摸，又忘了。这次再来，改变下只做笔记的方式，改为边学边动手敲。加油，maymay～
No one can stop u except yourself！

Vue<一>

  • 一，互动教程
    • 1，声明式渲染
    • 2，Attribute 绑定
    • 3，事件监听
    • 4，表单绑定
    • 5，条件渲染
    • 6，列表渲染
    • 7，计算属性
    • 8，生命周期和模板引用
    • 9，侦听器
    • 10，组件
    • 11，Props
    • 12，Emits
    • 13，插槽
  • 二，简介+快速上手
    • 1，特点：
      • （1）渐进式框架
      • （2）单文件组件
      • （3）选项式 API (Options API)
      • （4）组合式 API (Composition API)
    • 2，快速上手
      • （1）创建一个 Vue 应用
      • （2）通过 CDN 使用 Vue

一，互动教程

1，声明式渲染


<script>
export default {// 组件选项// 此处声明一些响应式状态data(){return {msg:'hello view'}}
}
</script><template><h1>Make me dynamic! {{msg}}</h1>
</template>

2，Attribute 绑定




<script>
export default {data() {return {titleClass: 'title'}}
}
</script><template><h1 :class="titleClass">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template><style>
.title {color: red;
}
</style>

3，事件监听

<script>
export default {data() {return {count: 0}},methods: {increment() {this.count++}}
}
</script><template><button @click="increment">count is: {{ count }}</button>
</template>

4，表单绑定


<script>
export default {data() {return {text: ''}}
}
</script><template><input v-model="text" placeholder="Type here"><p>{{ text }}</p>
</template>

5，条件渲染

<script>
export default {data() {return {awesome: true,show:true}},methods: {toggle() {this.awesome = !this.awesome}}
}
</script><template><button @click="toggle">toggle</button><h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no 												


											

Vue＜一＞互动教程相关推荐
	

    
								
  1. Vue.js入门教程-组件注册
		
    一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
    
		
    2. 
						
  2. Vue.js入学教程
		
    Vue.js是什么 Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. Vue.js(类似于view)是一 ...
    
		
    3. 
						
  3. 《互动教程 for Photoshop CC》已成功发布在App Store
		
    不看视频不看书,超级好玩的PS教程! App store下载量超百万! 超千份来自世界各地用户的五星好评以及诚意推荐! 单击.双击.长按.拖动及各种快捷键,就像您在真正的Photoshop上操作一样! ...
    
		
    4. 
						
  4. 互动教程 for Xcode10 and Swift4.2
		
    ◈ 不看视频不看书,史上最好玩的Xcode 10.0教程 ◈ 利用手指来互动式学习Xcode 10.0 ◈ 单击.双击.长按.拖动及Xcode各种快捷键,就像您在真正的Xcode上操作一样 ◈ 比观看 ...
    
		
    5. 
						
  5. 《Swift4.0互动教程》正式发布
		
    免费下载地址:https://itunes.apple.com/cn/app/id1320746678 ◈ 不看视频不看书,手把手带您学习Swift语言 ◈ 利用手指来互动式学习Swift 4.0 ◈ ...
    
		
    6. 
						
  6. vue整合视频流教程
		
    vue整合视频流教程 业务需求:客户需要将监控接入到自己的app中,在市面上很多监控是不分享视频流地址的,推荐方案选择海康,大华等品牌的监控,获取到监控地址整合到自己的app中. 在开发前需要普及的一 ...
    
		
    7. 
						
  7. 《互动教程 for Illustrator CC》中文版正式发布
		
    ◈ 不看视频不看书,史上最好玩的Ai教程 ◈ 使用手指互动式学习Illustrator! ◈ 单击.双击.长按.拖动及各种快捷键,就像您在真正的Illustrator上操作一样! ◈ 比观看视频.阅读 ...
    
		
    8. 
						
  8. 热烈庆祝《Vue.js 实战教程 V2.x（一）基础篇》上线了！
		
    热烈庆祝<Vue.js 实战教程 V2.x(一)基础篇>上线了! 课程简介 课程地址:https://edu.csdn.net/course/detail/25641 机构名称:大华软件学 ...
    
		
    9. 
						
  9. Vue.js入门教程（适合初学者）
		
    Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. Linux awk 使用
		
    2. 
						
  2. LeetCode 642. 设计搜索自动补全系统（Trie树）
		
    3. 
						
  3. 查询（python 版）
		
    4. 
						
  4. (转载)SQL高级查询技巧
		
    5. 
						
  5. 用 convert2rhel 工具将 CentOS 迁移至 RHEL
		
    6. 
						
  6. 通过char与varchar的区别，学习可变长的字符类型
		
    7. 
						
  7. 2019，别进大厂了！
		
    8. 
						
  8. SQL Server 两个时间段的差and时间截取到时分
		
    9. 
						
  9. 单片机用C语言锯齿波,试用c语言编写一个能输出锯齿波信号的单片机c51程序
		
    10. 
						
  10. pycharm 代码跳转
		
    11. 
						
  11. Java 根据身份证号获取性别、年龄、出生日期等信息
		
    12. 
						
  12. python线程池,多线程
		
    13. 
						
  13. 哪里看最新行业研报？
		
    14. 
						
  14. 计算机，软件工程类毕业论文选题要求
		
    15. 
						
  15. JavaSE_第十一章:常用类
		
    16. 
						
  16. wmi 计算机应用程序,WMI 提供程序宿主程序 (Wmiprvse.exe) 已安装 NLB 功能的基于 Windows Server 2008 的计算机上可能会崩溃...
		
    17. 
						
  17. 悍将余承东「调防」，华为云能翻盘吗？
		
    18. 
						
  18. python学习------面向对象的程序设计
		
    19. 
						
  19. 调试汇编程序详细过程
		
    20. 
						
  20. python学习（4）zip函数
		
    21. 
		

	


热门文章
	

    
									
  1. 5.电影搜索之 自动填充，也叫autocomplete、搜索建议！
			
    2. 
						
  2. mysql utf8 gbk_MySql中UTF8 和 GBK 编码中文字符长度问题
			
    3. 
						
  3. 柏林初创Meditopia​靠一个冥想App获1500万美元融资
			
    4. 
						
  4. php接口增加白名单,使用laravel中间件来添加指定请求的白名单
			
    5. 
						
  5. theano 这磨人的小妖精
			
    6. 
						
  6. 1N系列常用整流二极管的主要参数
			
    7. 
						
  7. My97DatePicker控件显示时分秒
			
    8. 
						
  8. linux下创建nginx虚拟目录详解,通过Samba映射Linux磁盘作为Windows　IIS的虚拟目录--梦飞翔的地方(梦翔天空)...
			
    9. 
						
  9. 记一次错，数据库报syntax
			
    10. 
						
  10. 博学谷在线python教育_2020年最新 博学谷Python基础班（共9天）
			
    11.