（24）打鸡儿教你Vue.js
学习Vue基础语法
Vue中的组件
Vue-cli的使用
1、使用Vue2.0版本实现响应式编程
2、理解Vue编程理念与直接操作Dom的差异
3、Vue常用的基础语法
4、使用Vue编写TodoList功能
5、什么是Vue的组件和实例
6、Vue-cli脚手架工具的使用
7、但文件组件，全局样式与局部样式
如何创建一个Vue实例：
直接用
开发版本和生产版本
使用cdn的形式
<body>
<div id="root">hello world {{msg}}</div>
<script>
new Vue({
el: '#root',
data: {
msg: 'hello world'
}
})
</script>
</body>
挂载点，模板，实例
Vue实例的挂载点为：
<div id="root">hello world {{msg}}</div>
Vue实例中的数据，事件，方法：
插值表达式：
<body>
<div id="root">
<h1>{{number}}</h1>
<h1 v-text="number"></h1>
<h1 v-html="number"></h1>
<div v-on:click="helloClick">{{content}}</div>
<div @click="helloClick">{{content}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
msg: 'world',
number: 123,
content: 'hello'
},
methods: {
helloClick: function() {
alert(123)
this.content = 'world'
}
}
})
</script>
</body>
React，Angular，Vue，Hybrid
属性绑定和双向数据绑定：
<input v-model="content"/>
<div>{{content}}</div>
计算属性和侦听器
<div id="root">
<input v-model="firstName">
<input v-model="lastName"/>
<div> {{firstName}} {{lastName}} </div>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function() {
this.count ++
},
lastName: function() {
this.count ++
},
fullName: function() {
this.count ++
}
})
</script>
v-if,v-show,v-for
v-show会隐藏，不会销毁重新创建
添加Key值可以提升效率
<ul>
<li v-for="item of list" :key="item">{{item}}</li>
</ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
v-if控制存在与否
v-show控制显示与否
todoList功能开发：
<body>
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
inputValue: 'hello'
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
template模板
<ul>
<todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item>
</ul>
<script>
// 定义组件 全局组件
Vue.component('todo-item', {
props: ['content'],
template: '<li>{{content}}</li>'
})
// 局部组件
var TodoItem = {
template: '<li>item</li>'
}
new Vue({
el； ‘#root’,
components: {
'todo-item': TodoItem
},
data: {
inputValue: '',
list: []
},
</script>
[外链图片转存失败(img-aYpEjoQ1-1562216687021)(https://upload-images.jianshu.io/upload_images/11158618-0611be5748ad2700.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
组件与实例的关系：
Vue.component('todo-item', {
props: ['content'],
template: '<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function() {
alert('clicked')
}
}
})
todolist删除功能：
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
（24）打鸡儿教你Vue.js的更多相关文章
- （29）打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- （26）打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- （22）打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- （21）打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- （19）打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- （18）打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- （17）打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- （15）打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- （13）打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- （12）打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- Springboot 结合百度IORC实现自定义模板图片识别
前言: 首先呢,最近再公司的项目当中遇到这样的一个问题,就是需要识别图片,提取图片当中的关键语句,而且识别的语句当然是人家手写体识别,翻来覆去一想,最终还是决定使用百度的OCR帮助我解决这一项需求 话 ...
- OI数学汇总
最前面:\(\LaTeX\)可能需要加载一会,请耐心等待o~ 前言 数学在\(\text{OI}\)中十分重要.其中大多都是数论. 什么是数论? \[ 研究整数的理论 --zzq \] 本文包含所有侧 ...
- Windows 系统上用 .NET/C# 查找所有窗口，并获得窗口的标题、位置、尺寸、最小化、可见性等各种状态
原文:Windows 系统上用 .NET/C# 查找所有窗口,并获得窗口的标题.位置.尺寸.最小化.可见性等各种状态 在 Windows 应用开发中,如果需要操作其他的窗口,那么可以使用 EnumWi ...
- cocoaPods升级遇到的问题 升级ruby 升级cocoaPos
最近重复了一次,修复一些更改. 1.查询 rvm版本rvm -v 2.查询ruby版本ruby -v 3.查询 gem 版本gem -v 4.查询ruby 镜像gem sources -l 5.升级r ...
- Git使用整理
[本文由水木桶首发于博客园,原文地址:https://www.cnblogs.com/shuimutong/p/11404664.html,未接允许,严禁转载] 背景 很久之前使用的是svn,直接在E ...
- 5.href和src区别? title和alt【CSS】
1.href (Hypertext Reference)指定网络资源的位置(超文本引用),从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,在 link和a 等元素 ...
- iOS静态库相关-封装lib
来源:http://blog.csdn.net/zsomsom/article/details/9163635 Library介绍 基本知识 在实际的编程过程中,通常会把一些公用函数制成函数库,供其它 ...
- js常用的数组去重方法
给出以下数组 var arr1 = new Array('1','2','3','3','5','4','5','6','5','5','88'); 实现对数组的去重 1. 双重for循环去重 Arr ...
- Entity framework 生成的SQL如何设置兼容低版本的数据（转载）
来源:https://q.cnblogs.com/q/84401/ 右键 edmx 文件,有xml方式打开. 将ProviderManifestToken 改为 2008 .
- Deep learning_CNN_Review：A Survey of the Recent Architectures of Deep Convolutional Neural Networks——2019
CNN综述文章 的翻译 [2019 CVPR] A Survey of the Recent Architectures of Deep Convolutional Neural Networks 翻 ...