vue 狂神教程学习笔记

最新推荐文章于 2023-02-04 01:00:00 发布

wei198621

最新推荐文章于 2023-02-04 01:00:00 发布

阅读量1.4k

点赞数 3

分类专栏：大前端知识

本文链接：https://blog.csdn.net/wei198621/article/details/116399881

版权

简介及目录

vue 狂神教程学习 6个小时

【狂神说Java】Vue最新快速上手教程通俗易懂
https://www.bilibili.com/video/BV18E411a7mC?p=1

狂神说视频学习代码git地址：
https://github.com/wei198621/front_vue_kuangshen

P0前言：回顾SSM阶段 25:58
P1、前端核心分析 22:16
P2、前端发展史 21:39
P3、第一个Vue程序 21:52
P4、Vue基本语法 12:22
P5、Vue绑定事件 09:57
P6、Vue双向绑定 12:52
P7、Vue组件讲解 11:56
P8、Axios异步通信 24:53
P9、计算属性 09:53
P10、插槽slot 17:46
P11、自定义事件内容分发 27:48
P12、第一个vue-cli程序 32:19
P13、webpack学习使用 29:11
P14、vue-router路由 28:50
P15、vue+elementUI 36:01
P16、路由嵌套 09:52
P17、参数传递及重定向 15:19
P18、404和路由钩子 22:23



C:\Users\wei19>cnpm install vue-cli -g

P0前言：回顾SSM阶段 25:58

SSM 知识点，与VUE无关

P1、前端核心分析 22:16

网络通信： axios
页面跳转： vue-router
状态管理： vuex

P2、前端发展史 21:39

UI框架：
----Ant-Design:阿里巴巴出品，基于React 的UI框架
----ElementUl、iview、ice:饿了么出品，基于Vue 的 UI框架
----Bootstrap: Twitter推出的一个用于前端开发的开源工具包
----AmazeUl:又叫“妹子UI”，一款HTML5跨屏前端框架 (20210504不可用)

Vue-UI: --------https://ice.work/
less中文网： ------------- http://lesscss.cn
vue 官网 ------------- https://cn.vuejs.org/
iview:(一套基于 Vue.js 的高质量 UI 组件库)
iview官网： ------------- https://www.iviewui.com
elementUI: (Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库)
elementUI官网： ------------- https://element.eleme.cn/#/zh-CN
vue-element-admin: 狂神教学vue框架（貌似打开不了网站，有些尴尬）
https://panjiachen.github.io/vue-element-admin-site/zh/

异步通信框架Axios GitHub: https://github.com/axios/axios
异步通信框架Axios 中文文档: http://www.axios-js.com/

vue生命周期图示：
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定。

JavaScript构建工具
---- Babel:JS编译工具，主要用于浏览器不支持的ES 新特性，比如用于编译TypeScript
---- WebPack:模块打包器，主要作用是打包、压缩、合并及按序加载

P3、第一个Vue程序 21:52

Vue (读音/vju1，类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router，vue-resource，vuex）或既有项目整合。

vue优点
吸收了Angular(模块化)和React(虚拟DOM)的长处，

vue不支持IE8及以下版本，因为VUE使用了ECMAScript5

vue 开发工具

VsCode
Hbuilder
Sublime
WebStorm

IDEA 作为开发VUE工具
需要安装 VUE.js 插件

vue 包下载地址

·包含完整的警告和调试模式: https://vuejs.org/js/vue.js
·删除了警告，30.96RB min + gzip: https://vuejs.org/js/vue.min.js
< script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></ script>
< script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js "></ script>

vue 787 知识点：

学习vue我们必须之到它的7个属性，8个方法，以及7个指令。787原则
el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

在这里插入图片描述

IDEA 开发第一个VUE程序

安装IDEA Vue.js插件

在这里插入图片描述

2 新建空文件夹 vue-first

在这里插入图片描述

3 新建一个最简单的vue html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    {
  { message }}
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    // model 层 
    var vmdata={
    
        message: "abc",

    }
    //  ViewModel 层  
    var vm=new Vue({
    
        el:"#app",
        data:vmdata,
    })
</script>
</body>
</html>

在这里插入图片描述
通过如下三种方式都可以实现修改数据，让view层页面改变的目的

vm.$data.message="abc1"
"abc1"
vm.message="abc2"
"abc2"
vmdata.message="abc3";
"abc3"

P4、Vue基本语法 12:22

Vue 指令
https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once

el: v-bind:
data: v-if v-else v-else-if
methods: v-on

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    <div v-for="item in items">
        ---{
  { item.key}}----{
  { item.message }}---{
  { item.name}}----
    </div>
</div>
<!--导入VUE.JS-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js "></script>
<script>
    // model 层
    var vmdata={
    
        items : [
            {
    message: "this is one ",name : "name1",key:"key1"},
            {
    message: "this is two ",name : "name2",key:"key2"},
            {
    message: "this is three ",name : "name3",key:"key3"},
            {
    message: "this is four ",name : "name4",key:"key4"},
        ]

    }
    //  ViewModel 层
    var vm=new Vue({
    
        el:"#app",
        data:vmdata,
    })
</script>
</body>
</html>

P5、Vue绑定事件 09:57

P6、Vue双向绑定 12:52

在这里插入图片描述

<!DOCTYP

最低0.47元/天解锁文章

wei198621

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
vue 狂神教程学习笔记

简介及目录vue 狂神教程学习 6个小时【狂神说Java】Vue最新快速上手教程通俗易懂https://www.bilibili.com/video/BV18E411a7mC?p=1P0前言：回顾SSM阶段 25:58P1、前端核心分析 22:16P2、前端发展史 21:39P3、第一个Vue程序 21:52
复制链接

扫一扫