愿景："让编程不再难学，让技术与生活更加有趣"
更多架构课程请访问 xdclass.net
目录
第3集 新版Vue快速入门之v-if 和v-else条件指令
第1集 新版VueCli 4.3创建vue项目
简介：使用vue cli 4.3创建vue项目
-
Vue模板语法开发起步
- 基于 HTML 的模版语法，允许声明式地将 DOM 绑定至底层 Vue 实例的数据。
- 用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
- 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件并应用到 DOM 操作上
-
创建测试vue项目
vue create my-project -
vue-cli创建项目，目录介绍
-
vscode打开项目
- 需要打开文件夹，文件夹里面创建Html
-
原生Vue测试基础语法
-
使用cdn引入vue
-
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> </body> </html> -
{{}}
-
文本插值
-
里面JavaScript 表达式支持
{{5+5}} {{ message.split('').reverse().join('') }}
-
-
Vscode里面快速打开html
- 安装 Live Server 插件
第2集 新版Vue快速入门之Vue指令和参数
简介：讲解什么是Vue指令
-
VUE的文档 https://cn.vuejs.org/
-
指令 :带有 v- 前缀的特殊属性。 指令用于在表达式的值改变时，将某些行为应用到 DOM
-
v-bind 指令
- HTML 属性中的值更新时使用
-
v-if v-else 指令
- 逻辑判断
-
v-model 指令
- 实现双向数据绑定，
- 一般在 input、select、textarea、checkbox、radio等表单上使用
-
v-on指令
- 监听事件，并对用户的输入进行响应
-
-
参数: 在指令后以冒号指明，例如 v-bind 指令被用来响应地更新 HTML 属性
<p> <a v-bind:href = "url" > 小滴课堂 </a> </p>
- 附加： 指令表达式取值是不用加 双花括号
第3集 新版Vue快速入门之v-if 和v-else条件指令
简介：讲解新版Vue条件指令
- v-if v-else逻辑判断
<div id="app">
<div v-if="Math.random() > 0.5 "> 大于0.5 </div>
<div v-else>小于0.5 </div>
</div>
<script>
new Vue({
//绑定到哪个元素
el:'#app',
//数据源
data:{
},
//自定义方法
methods: {
}
})
</script>
第4集 新版Vue快速入门之v-for 循环指令
简介：讲解新版Vue的v-for 循环指令
- v-for 循环指令
<div id="app">
<ol>
<li v-for=" user in users ">
{{user.name}}
</li>
</ol>
</div>
<script>
new Vue({
//绑定到哪个元素
el:'#app',
//数据源
data:{
users:[
{name: "Anna小姐姐"},
{name: "老王"},
{name: "二当家小D"},
]
},
//自定义方法
methods: {
}
})
</script>
第5集 新版Vue快速入门之v-model
简介：讲解新版Vue的v-model
- v-model 实现双向数据绑定
<div id="app">
<p> {{phone}} </p>
手机号 <input v-model="phone" />
</div>
<script>
new Vue({
//绑定到哪个元素
el:'#app',
//数据源
data:{
phone : "000"
},
//自定义方法
methods: {
}
})
</script>
第6集 新版Vue快速入门之v-on监听事件
简介：讲解新版Vue的v-on指令 监听事件
- v-on 监听事件
<div id="app">
<p> {{title}} </p>
<button v-on:click="changeTitle"> 完善标题 </button>
</div>
<script>
new Vue({
//绑定到哪个元素
el:'#app',
//数据源
data:{
title: "面试专题课程"
},
//自定义方法
methods: {
changeTitle:function(){
this.title = "||小滴课堂 2020年 " + this.title;
}
}
})
</script>
第7集 Vue常见缩写 v-bind和v-on讲解
简介：vue常见缩写v-bind和v-on讲解
-
v-bind缩写
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a> -
v-on缩写
<!-- 完整语法 --> <a v-on:click="changeTitle">...</a> <!-- 缩写 --> <a @click="changeTitle">...</a> -
课程代码
<div id="app">
<p> {{title}} </p>
<button @click="changeTitle"> 完善标题 </button>
<p/>
<a :href="url" > 点击跳转 </a>
</div>
<script>
new Vue({
//绑定到哪个元素
el:'#app',
//数据源
data:{
title: "面试专题课程",
url : "https://xdclass.net"
},
//自定义方法
methods: {
changeTitle:function(){
this.title = "||小滴课堂 2020年 " + this.title;
}
}
})
</script>
第8集 新版Vue快速入门之component组件
简介：讲解vue里面的组件
-
vue的组件
- 扩展 HTML 元素，封装可重用的代码（就是通用的模块）
-
注册组件
- Vue.component(组件名, 选项)
-
组件可以拷贝多次，复用多次
-
每个组件都会各自独立维护它的数据
-
data 必须是一个函数，而不是前面讲的json对象
- 每个实例可以维护一份被返回对象的独立的拷贝, 否则数据就会共享出现问题
-
<div id="app">
<xd_component></xd_component>
<xd_component></xd_component>
<xd_component></xd_component>
<xd_component></xd_component>
</div>
<script>
Vue.component('xd_component',{
data:function(){
return {
count: 0
}
},
template:' <button v-on:click="count++"> 点击 {{count}}次 </button> '
})
new Vue({
//绑定到哪个元素
el:'#app',
//数据源
data:{
},
//自定义方法
methods: {
}
})
</script>第9集 新版Vue快速入门之prop向子组件传值
简介：讲解vue里面通过prop向子组件传值
<div id="app">
<xd_component message="小滴课堂 https://xdclass.net"></xd_component>
<xd_component message="面试专题"></xd_component>
</div>
<script>
Vue.component('xd_component',{
props:{
message:{
type:String
}
},
data:function(){
return {
count : 0
}
},
//组件里面的template只能包含一个根节点
template:'<div> <button v-on:click="count++"> {{message}} 点击 {{count}}次 </button> </p> </div> '
})
new Vue({
//绑定到哪个元素
el:'#app',
//数据源
data:{
},
//自定义方法
methods: {
}
})
</script>
- 向子组件传外部data的里值,需要加 v-bind
<xd_component message="小滴课堂 https://xdclass.net" v-bind:XXXX></xd_component>
或缩写
<xd_component message="小滴课堂 https://xdclass.net" :XXXX></xd_component>
愿景："让编程不再难学，让技术与生活更加有趣"
小滴课堂前端项目技术栈介绍和ES6知识点补充
第1集小滴课堂前端项目技术组件概述
简介：常见的技术组件的作用
-
学前必备基础： HTML、CSS 、JavaScript、Vue 基础知识
-
Vue: 用于构建用户界面的渐进式JavaScript框架
-
什么是Cube-UI
- 基于 Vue.js 实现的精致移动端组件库
- 地址：https://didi.github.io/cube-ui/#/zh-CN
-
Vuex: 在Vue项目开发时使用的状态管理工具
- state：存储数据
- mutations：同步修改存储数据
- actions: 异步修改存储数据
- getters：获取存储数据前进行修改
-
Axios: 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
- 从浏览器中创建 XMLHttpRequest,也可以 node.js 发出 http 请求，
- 支持 Promise API
- 支持拦截请求和响应，并转换数据
- Vue-router：Vue官方的路由管理器，实现页面前端路由 Hash模式（默认）： History模式：
第2集 ECMAScript 6常见语法快速入门《上》
简介：讲解ES6里面常见的语法上集
- 什么是ES6 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言
- let、const 语法 let : 定义变量，推荐在函数中使用 let 定义变量，而非 var const： 它可以声明一个常量（如果是普通的变量一般大写）
-
箭头函数： ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟一个 =>，紧接着是函数体
//以前js定义函数 var sum = function(num1,num2) { return num1 + num2; }; // 使用箭头函数 let sum = (num1,num2) => num1 + num2; -
对象词法扩展: 在对象字面量时使用简写语法，来初始化属性变量和函数的定义方法
function getVideo(make, model, value) { return { // 简写变量 make, // 等同于 make: make model, // 等同于 model: model value, // 等同于 value: value }; } let video = getVideo('java', 'java', 99); output: { make: 'java', model:'java', value: 99, }
第3集 ECMAScript 6常见语法快速入门《下》
简介：讲解ES6里面常见的语法下集
-
解构赋值 一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
let [a, b, c] = [1, 2, 3]; // a = 1 // b = 2 // c = 3 let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb'
-
在ES6中如何导入模块 import 模块名称 from '模块标识符'
import axios from 'axios' import { loginApi } from '@/api/getData.js' -
在ES6中如何导出模块
-
方式一： export default 向外暴露的成员可以使用任意的变量来接收 注意：在一个模块中只能使用export default向外暴露一次
//user.js export default { name: 'xdclass.net', age: 10 } //main.js import xd from './user' //xd 为一个包含 name 和 age 属性的对象 -
方式二： export 向外暴露的成员只能使用 {} 接收，这叫做 按需导出 注意：一个模块中可以同时使用 export default 和 export 暴露成员
// user.js export default { name: 'xdclass.net', age: 10 } export var teacher = "小滴课堂-二当家小D" export var content = '全栈工程，和隔壁老王比较熟悉' //main.js import xd, { teacher,content } from './user'
-
干货文档
关注公众号发送：“CSDN干货文档” 即可领取
1939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
