了解vue2.x的核心技术

建立前端组件化的思想

常用的vue语法

vue-router,vuex,vue-cli

使用vue-cli工具

Vue框架常用知识点

vue核心技术

集成Vue

重点看,重点记

模板语法,条件渲染,列表渲染

vuex,vue-router

v-bind属性绑定,事件绑定

Class与Style绑定

workflow工作流

单页面

Cli工具登录环境

  1. vue常用模板语法
  2. 列表渲染、条件渲染
  3. Class与style绑定
  4. vue事件绑定与处理
  5. vue计算属性computed, watch
  6. vue-cli快速创建工程
  7. vue的组件思想,代码规范
  8. vue-router介绍
  9. 认识vuex,组件间的通信方式
  10. 前端调试方法,vue组件调试方法

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
or Wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

开发环境:

ide,node.js,调式环境,工程环境

node --version

npm i -g vue-cli

vue --version

环境:

ide: webstrom,vscode

npm: vue-cli,webpack,cnpm,nvm

Chrome: Vue调式插件

Vue:

声明式渲染

条件渲染

列表

事件

热部署:gulp,webpack

认识样式:sass,postcss

模板语法

计算属性

Class,Style绑定

条件渲染

列表渲染

事件处理

表单输入绑定

组件基础,生命周期,模块化的思想

组件:

组件通信方式:props,$parentemit eventVuex

动画,vue-router, Vue-resource

常用api:

vue-use

props

dom

部署,服务器端渲染,打包编译

vue,基础概念,组件,api,部署

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
hello world!!
</body>
</html>

BootCDN

稳定、快速、免费的前端开源项目 CDN 加速服务

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg">
hello world!!
{{msg}}
</div>
<script>
new Vue({
el: '.bg',
data: {
msg: 'hello vue!'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg" id="app">
hello world!!
{{msg}}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue!'
}
})
</script>
</body>
</html>

vue.js cdn使用

模板语法

vue的文件结构:

template

script

style

模板语法包含插值,指令

// 错
{{template}}
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue!!',
count: 0,
template: '<div>hello template</div>'
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg" id="app">
hello world!!
{{msg}}
<div v-html="template"></div>
</div> <script>
new Vue({
el: '#app',
data: {
msg: 'hello vue!',
template: '<div>hello dashucoding</div>'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg {
color: red;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div class="bg" id="app" v-bind:id="bg1">
hello world!!
{{msg}}
{{count}}
<div v-html="template"></div>
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
<button type="button" v-on:click="submit()">加</button>
<button type="button" @click="submit()">加</button>
</div> <script>
new Vue({
el: '#app',
data: {
bg1: 'app-bind',
msg: 'hello vue!',
template: '<div>hello dashucoding</div>',
url: 'http://www.baidu.com',
count: 0
},
methods: {
submit: function() {
this.count++
}
}
})
</script>
</body>
</html>

vue文件结构

插值语法{{msg}}

数据

js表达式

指令

@click
v-if
:href

计算属性与侦听器

计算属性:computed

侦听器:watch

使用场景:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head>
<body>
<div id="app">
{{msg}}
<p>{{msg1}}</p>
</div>
<script>
var arr = 'da'
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue!',
another: 'another hello'
},
// 监听
watch: {
msg: function (newval, oldval) {
console.log('newval is:'+newval)
console.log('oldval is:'+oldval)
}
},
computed: {
msg1: function () {
return 'computed:' + this.msg + "," + this.another + arr
}
}
})
</script>
</body>
</html>

arr改变时不会变化,只有msg1里面的内容改变才会发生变化

watch异步场景,computed数据联动

条件渲染,列表渲染,Class与Style绑定

条件渲染:

v-fi
v-else
v-else-if v-show

列表渲染:

v-for
<div id="app">
<div v-if="count>0">
</div>
<div v-else>
</div>
</div>
<div v-for="item in list">{{item}}</div>
<div v-for="item in list">{{item.name}}</div> <script>
new Vue({
el: '#app',
data: {
list: [{
name:
age
},{
}]
}
})
v-bind:style="{ 'color': 'red' }"

v-bind:style="styleMsg"
:class="{ 'active': ture }"
:style="styleMsg" data: {
style: {
colord: red
}, styleMsg: {
color: 'red',
textShadow: '0 0 5px green'
}
}
<div v-show=""
:class="[ 'active', 'add', 'more', { 'another' : ture } ]"
:style="styleMsg">

工程化,页面代码规范,调式vue


请点赞!因为你的鼓励是我写作的最大动力!

吹逼交流群:711613774

(19)打鸡儿教你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. (18)打鸡儿教你Vue.js

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

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

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

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

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

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

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

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

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

随机推荐

  1. JDK提供的原子类和AbstractQueuedSynchronizer(AQS)

    大致分成: 1.原子更新基本类型 2.原子更新数组 3.原子更新抽象类型 4.原子更新字段 import java.util.concurrent.atomic.AtomicInteger; impo ...

  2. 基于node.js 的 websocket的移动端H5直播开发

    这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...

  3. Oracle.EntityFrameworkCore使用时报错:Specified cast is not valid

    我用的是:Oracle.EntityframeworkCore 2.19.30 如果看到报错:System.InvalidCastException:“Specified cast is not va ...

  4. Swift枚举的全用法

    鉴于昨天开会部门会议讨论的时候,发现有些朋友对枚举的用法还是存在一些疑问,所以就写下这个文章,介绍下Swift下的枚举的用法. 基本的枚举类型 来,二话不说,我们先贴一个最基本的枚举: enum Mo ...

  5. FreeRTOS互斥信号量

    API函数 #if( configSUPPORT_DYNAMIC_ALLOCATION == 1 ) #define xSemaphoreCreateMutex() xQueueCreateMutex ...

  6. python 版本号比较 重载运算符

    # -*- coding: utf-8 -*- class VersionNum(object): """ 版本号比较 默认版本以“.”分割,各位版本位数不超过3 例一: ...

  7. Android笔记(四十三) Android中的数据存储——SQLite(五)delete

    SQLite通过delete()方法删除数据 delete()方法参数说明: delete()方法参数 对应sql部分 描述 table delte from table_name 要删除的表 whe ...

  8. php基本数据类型

    trim()函数,用于去除字符串首尾空格和特殊字符返回的是去掉的空格和特殊字符后的字符串 string trim(string str [,string charlist]); str 要操作的字符串 ...

  9. 3D中OBJ文件格式详解

    常见到的*.obj文件有两种:第一种是基于COFF(Common Object File Format)格式的OBJ文件(也称目标文件),这种格式用于编译应用程序:第二种是Alias|Wavefron ...

  10. web中cookie和session_转

    转自:Python爬虫番外篇之Cookie和Session  python修行路 关于cookie和session估计很多程序员面试的时候都会被问到,这两个概念在写web以及爬虫中都会涉及,并且两者可 ...