Vue学习(day1)

最新推荐文章于 2022-01-11 00:37:57 发布

vito7zhang

最新推荐文章于 2022-01-11 00:37:57 发布

阅读量461

点赞数

分类专栏：前端庆祝开新版-送c币喽文章标签： vue

本文链接：https://blog.csdn.net/qq_27816995/article/details/70237131

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

庆祝开新版-送c币喽

1 篇文章 0 订阅

订阅专栏

快速学习Vue笔记（day 1)

Vue快速简介

官网： vue.org

Vue定位是渐进式JavaScript框架，特点：易用，灵活，性能高。

Github代码仓库：vuejs/vue

新手入门:包含官网例子，教程；github仓库：vuejs/awesome-vue

课程指南：

渐进式框架Vue
vue中的两个核心点
虚拟DOM
MVVM模式
Vue示例
声明式渲染
指令
模板

Vue渐进式学习提纲

基础语法

vue实例
模板语法
计算属性
class和style绑定
条件和列表渲染
事件处理器
表单控件绑定
组件

高级进阶

vue插件编写
mixin混合
过渡效果
自定义指令
vue-router路由系统的使用
vueX:状态管理器

构建工具

nodejs: JavaScript运行环境
webpack: 模板管理和打包工具
vue-cli: 脚手架配置

Vue是什么

一套构建用户界面渐进式JavaScript框架，只关注视图
vue.js目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

渐进式框架

声明式渲染

组件系统

客户端路由

大规模状态管理

构建工具

声明式渲染：只想用vue作为模板引擎，只想渲染
组件系统：界面分模块
客户端理由：移动端，SP
大规模状态管理：组件多，共享数据
构建工具：团队共同环境

要什么用什么。嵌入程度低

Vue中的两个核心点

响应的数据绑定

当数据发生改变 > 自动更新视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="vue.js" charset="utf-8"></script>
</head>
<body>
    <!-- 模板 -->
    <div id="demo">
        {{message}}
    </div>
    <script type="text/javascript">
        // 数据
        let data = {
            message : "hello Vue!"
        }

        // Vm示例
        var vm = new Vue({
            el : "#demo",
            data : data
        });
    </script>
</body>
</html>

上面代码，可以在页面中的控制台改变vm.message的值，会发现，页面当中的值也发生改变。

原理：利用object.definedProperty中的setter/getter代理数据，监控对数据的操作

组合的视图组件

UI的页面映射为组件树

划分可维护、可重用、可测试

虚拟DOM

运行JS的速度是很快的，大量的操作DOM就会很慢，经常在更新数据会重新渲染页面，这样会造成在没有改变数据的地方也重新渲染了DOM节点，这样会造成很大的资源浪费。

vue利用在内存中生成与真是DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM

当数据发生改变的时候，能够只能的计算出重新渲染组件的最小代价并应用到DOM操作上。

MVVM模式

M： Model 数据模型

V： View 视图模型

VM：View-Model 视图模型

具体看这里吧，link: http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

Vue实例

vue实例：每一个应用都是通过vue这个构造函数创建根实例(root instance)启动new Vue(选项对象)。

需要传入选项对象，对象包括挂载元素，模板，方法等等。

el: 挂载元素选择器 String | HemlElement
data: 代理数据 Object | Function
methods: 定义方法 Object

其他详细属性见官网API文档>

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js" charset="utf-8"></script>
</head>
<body>
    <div id="demo">
        <span v-on:click="clickHandle">{{ message }}</span>
    </div>
    <script type="text/javascript">
        // 数据
        let obj = {
            message : 'hello vue'
        }
        var vm = new Vue({
            el: "#demo",
            data: obj,
            methods: {
                // 事件处理函数放置的地方
                clickHandle(){
                    alert('click')
                }
            }
        });
    </script>
</body>
</html>

vue代理data数据：如上面的例子，vue实例会代理其data对象里所有属性，这些代理属性是相应的。新天家的属性不具备响应功能，改变不会更新视图。

vue实例自身属性和方法：暴露自身的属性和方法，已$开头，如在上面console.log(vm.$data);来查看。

声明式渲染

声明式

只需要声明在哪里做什么，而无需关心如何实现

命令式

需要一具体的代码表达在哪里做什么，如何实现

例子：求数组每一项的倍数

声明式：直接使用map方法
命令式：使用for循环，每拿出意向，求完成后再放入另一个数组。

vue声明式渲染：初始化根实例，vue自动将数据绑定在DOM模板上

课后

安装vue环境：https://zhuanlan.zhihu.com/p/26367238?refer=imweb

遇到问题：

安装babel失败。
- 解决：nodejs更新
区分开发以及向上环境代码
- 放置于webpack.config.js文件内

vito7zhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(day1)

快速学习Vue笔记（day 1)Vue快速简介官网： vue.orgVue定位是渐进式JavaScript框架，特点：易用，灵活，性能高。Github代码仓库：vuejs/vue新手入门:包含官网例子，教程；github仓库：vuejs/awesome-vue课程指南：渐进式框架Vuevue中的两个核心点虚拟DOMMVVM模式Vue示例声明式渲染指令模板Vue渐进式学习提纲基础语法
复制链接

扫一扫

专栏目录