学习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的更多相关文章

  1. (29)打鸡儿教你Vue.js

    web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...

  2. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  3. (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...

  4. (21)打鸡儿教你Vue.js

    组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...

  5. (19)打鸡儿教你Vue.js

    了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...

  6. (18)打鸡儿教你Vue.js

    介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...

  7. (17)打鸡儿教你Vue.js

    vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...

  8. (15)打鸡儿教你Vue.js

    组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...

  9. (13)打鸡儿教你Vue.js

    一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...

  10. (12)打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

随机推荐

  1. Golang --多个变量同时赋值

    编程最简单的算法之一,莫过于变量交换.交换变量的常见算法需要一个中间变量进行变量的临时保存.用传统方法编写变量交换代码如下: var a int = 100 var b int = 200 var t ...

  2. golang ---调用window api函数执行程序

    package main import "syscall" import "unsafe" func main() { var hand uintptr = u ...

  3. Form' threw an exception of type 'System.InvalidOperationException'

    环境:VS2017 NetCore 2.2 Razor Layui 在处理异步请求是遇到"((Microsoft.AspNetCore.Http.Internal.DefaultHttpRe ...

  4. 解决Ubuntu 16.04 环境下Python 无法显示中文的问题

    一.下载中文字体(https://pan.baidu.com/s/1EqabwENMxR2WJrHfKvyrIw 这里下载多是SImhei字体) 安装字体:解压:unzip SimHei.zip拷贝字 ...

  5. Java日志logback使用

    pom中添加: <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</ ...

  6. 编译基于obs-studio的阿里巴巴直播工具tblive的过程和常见问题解决

    tblive 简介 tblive开源项目对应的产品是千牛主播,是一个独立的PC端主播工具,基于开源软件OBS Studio来修改定制. 项目说明 tblive是一款优秀的基于obs-studio的直播 ...

  7. DDL和DML 的区别

    DDL (Data Definition Language 数据定义语言) create table 创建表 alter table 修改表 drop table 删除表 truncate table ...

  8. 关于近期使用webpack所引发的思考

    近期,(使其也挺长时间了).使用了一段时间的webpack. 但是在使用期间个人感觉并不想网上说的那样好,个人对webpack的评价并不是很高,甚至有点反感使用webpack. 个人感觉使用webpa ...

  9. laravel——表操作集成操作

    背景:通过判断不同的请求参数,返回不同的需要的数据 一.准备工作: 数据库新建一个表 DROP TABLE IF EXISTS `tb_category2`; CREATE TABLE IF NOT ...

  10. Java8 stream用法-备忘录

    1. 如何使用匹配模式 List<String> strs = Arrays.asList("a", "a", "a", &qu ...