1.vue初体验

1.1.vue简介

1.1.1.vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，什么叫做渐进式呢？通俗的讲就是一层一层的，一步一步的来做事情的方式。什么又是框架呢？可以理解为一套完整的解决方案。总结起来理解，vue是一个框架，提供了一套完整的解决方案，同时这个框架是渐进式的，你不必使用整个框架的所有内容，可以根据自身的应用场景只使用一部分

1.1.2.框架和库的区别？

框架：字面上理解为架子，会基于自身的特点为用户提供一整套的解决方案，倾向于创造一套需要你来遵守的规则和范例，你可以基于这套架子快速实现应用，但前提是你必须按照它的规则来写，例如：ThinkPHP框架，必须要求你按照它的命名规则、代码组织结构来写

库：讲代码集合成的一个产品，供程序员调用，例如：jquery库，只需要引入使用它的功能就可以了，至于你的应用怎样架构，项目目录怎样组织它并不关心

本质上它们都是一样的，框架可以理解为库的超集，框架中可以引入各种库

1.1.3.vue渐进式使用场景理解

1.刚学完前端，进入公司，维护一个老系统，这个时候的应用场景就是收集表单信息，发送到后台，这些事情jquery可以做，如果你想引入新技术，可以直接引入vuejs核心库，把vue当作一个js库来使用，主要做表单数据收集、验证、提交

2.当你在上一步引入vue以后，发现用得越来越爽，团队也开始接受了vue，领导也觉得效率得到了提升，于是你参与到了新项目，承担起了常规的业务开发，在这个新项目中，你需要做到就是渲染商品列表和商品详情页，你开始把整个页面的dom都交给vue来管理，原来jquery都只是不断的找dom，然后操作dom，而使用vue以后你发现根本不需要再去操作dom元素了，只需要关注数据的变化，数据变化了dom就会变化，这个时候，你发现jquery并没有什么用了，而且jquery用起来并没有vue那么爽

3.接到新任务，完成一个移动站，于是你又去学习了webpack、vue-router，这样你就开始了走上了前端工程化的道路

4.做完移动站后，又接到更大的项目，这个项目需要和后端接口频繁沟通，大量数据在组件间共享，这个时候，你听说了vuex可以很方便的做数据状态管理，因此，你又用上了vuex

5.随着公司用户增长，你需要关注更多的性能和seo方面的问题，因此，你又用上了后端渲染 ssr

6.此时，你已经是10多人的前端leader了，为了保障团队高质量输出，你开始研究如何写单元测试...

1.2.安装和使用

1.2.1.安装

首先创建一个项目目录，我这里创建一个vue-demo的目录，这个名字可以自定义，但是不要命名为vue 这样会冲突

//我这里使用命令来创建，如果对命令不熟悉，可以直接在webstorm中创建

mkdir vue-demo

然后进入到vue-demo目录,如果使用webstorm创建的话就直接在webstrom中打开teminal，这样是默认进入vue-demo的

cd vue-demo

接下来初始化项目

npm init -y

最后使用npm 安装vue

npm install vue@2.5.16

1.2.2.使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">{{message}}</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>

new Vue({

    el: '#app',

    data:{

        message: 'hello world!!!'

    }

})

</script>

</body>

</html>

1.3.vue实例

可以通过new Vue函数创建出一个新的Vue实例

let vm = new Vue()

console.log(vm);

可以在创建Vue实例的时候传入相应的选项

let vm = new Vue({

    el: '#app'  //id名为app的元素作为应用的根节点

})

console.log(vm.$el)  //这里打印出相应的根节点

$el是vm的实例属性，除此之外之外，还有一些其他的属性和方法，它们都是以$符号开头的，用来和用户自定义的属性区分开

初始化时传入的data选项，用来存放相关数据，并且这些数据是响应式的

let vm = new Vue({

    el: '#app',

    data: {

        message: 'hello,nodeing',

        username: 'xiaoqiang'

    }

});

console.log(vm.$data.message)  //hello,nodeing

console.log(vm.$data.username)  //xiaoqiang

打开控制台，然后输入下面代码，可以发现浏览器显示也跟着变化

需要注意的是，只有初始化的时候，在选项data中存在的属性才是响应式的

例如，初始化的时候是这样的：

let vm = new Vue({

    el: '#app',

    data: {

        message: 'hello,nodeing',

        username: 'xiaoqiang'

    }

});

其中，data里面并没有password属性，我们在浏览器中增加password属性，是看不到变化的

螺钉课堂视频课程地址：http://edu.nodeing.com

vue基础入门（1）的更多相关文章

  1. vue基础入门（2.1）

    2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...

  2. vue基础入门

    Hello World   <body> <!-- 在angularJS中用ng-model --> <!-- {{mseeage?message:11}}支持三元表达式 ...

  3. vue基础入门（4）

    4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求 需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...

  4. vue基础入门（3）

    3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...

  5. vue基础入门（2.3）

    2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...

  6. vue基础入门（2.2）

    2.2.基础指令 2.2.1.什么是指令 指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...

  7. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  8. Vue基础入门笔记

    不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...

  9. vue 基础入门（一）

    app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...

随机推荐

  1. Java实现 蓝桥杯 算法训练 递归求二项式系数

    算法训练 6-1 递归求二项式系数值 时间限制:10.0s 内存限制:256.0MB 问题描述 样例输入 一个满足题目要求的输入范例. 3 10 样例输出 与上面的样例输入对应的输出. 数据规模和约定 ...

  2. Java实现蓝桥杯快乐数

    [问题描述] 判断一个正整数是否是快乐数字? 如果一个数字能够通过有限次快乐变换成为1,则是快乐数字. 快乐变换是对一个数字的每一位的平方数求和. 例如: 对于68 68 => 62+82= 1 ...

  3. java实现第六届蓝桥杯无穷分数

    无穷分数 无穷分数 无穷的分数,有时会趋向于固定的数字. 请计算[图1.jpg]所示的无穷分数,要求四舍五入,精确到小数点后5位,小数位不足的补0. 请填写该浮点数,不能填写任何多余的内容. 结果:0 ...

  4. 二叉树路径搜索---DFS 路径和

    vector<vector<int>> pathSum(TreeNode* root,int sum){//DFS遍历获取适合路径,当递归到叶子结点且sum为0,表示该路径合适 ...

  5. 调优 | Apache Hudi应用调优指南

    通过Spark作业将数据写入Hudi时,Spark应用的调优技巧也适用于此.如果要提高性能或可靠性,请牢记以下几点. 输入并行性:Hudi对输入进行分区默认并发度为1500,以确保每个Spark分区都 ...

  6. OV2640读ID全是FF问题

    最近刚好在Cyclone IV上通过LVDS把一个7寸的屏点亮,赶着热度,淘宝买了OV2640这个摄像头模块,初始化因为用Vrilog比C复杂得多,易调试性不如C,所以使用STM32初始化,模块有F3 ...

  7. 深入理解JVM（③）判断对象是否还健在？

    前言 因为Java对象主要存放在Java堆里,所以垃圾收集器(Garbage Collection)在对Java堆进行回收前,第一件事情就是要确定这些对象之中哪些还"存活"着,哪些 ...

  8. SpringBoot爬坑系列

    1.日志篇 现象 由于日志配置采用原来SpringMVC项目中的log4j.properties 文件,日志采用springboot自带的jar包会出现打印不出日志的情况. 解决 引入原日志包 < ...

  9. office2016专业增强版激活密匙 （shell激活版）

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_42642945/article/d ...

  10. 使用navicat连接mysql连接错误：Lost connection to Mysql server at 'waiting for initial communication packet'

    使用navicat时,报错截图如下: 原因分析: mysql开启了DNS的反向解析功能,这样mysql对连接的客户端会进行DNS主机名查找. mysql处理客户端解析过程: 当mysql的client ...