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. jchdl - RTL Module

    https://mp.weixin.qq.com/s/Sr4ffU4TPPoUJpdInwWd6w ​​ jchdl Module类在概念上对应Verilog的module,作为所有用户自定义模块的父 ...

  2. JAVA实现对称加密

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.对称加密算法DES 1.概述:采用单钥密码系统的加密方法,同一个密钥可以同时用作信息的加密和解密,这 ...

  3. Java实现 LeetCode 503 下一个更大元素 II

    503. 下一个更大元素 II 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 x 的下一个更大的元素是按数组遍历顺序,这个数字之后的第一个比它更大 ...

  4. Java实现第八届蓝桥杯购物单

    购物单 题目描述 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有打 ...

  5. CSS 简介/特点/优势/给特定浏览器提供不同样

    1.CSS简介 CSS全称Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”,通常称为CSS样式或者样式表.CSS是一些纯文本内容,文件格式为.css. 2.CSS特点 ...

  6. 案例:DG主库未设置force logging导致备库坏块

    DG搭建时,官方文档手册有明确提到要设置数据库为force_logging,防止有nologging操作日志记录不全导致备库应用时出现问题. 虽然是老生常谈的安装规范,但现实中总会遇到不遵守规范的场景 ...

  7. 华为EMUI在service中不能打印debug级别的日志

    华为emui在service里面不能打印debug级别的日志,因为这个小问题调试了一上午,刚开始我还以为emui把系统service的启动流程都改了呢

  8. Node第三方模块

    node第三方模块集合 1.nrm 切换npm下载的镜像地址 nrm ls   查看可用镜像 nrm use +镜像名 2.nodemon 在控制台nodenom替代node命令执行nodejs文件, ...

  9. Copy-on-write + Proxy = ?

    一.简介 Immer (German for: always) is a tiny package that allows you to work with immutable state in a ...

  10. iic uart spi

    第一个区别当然是名字: SPI(Serial Peripheral Interface:串行外设接口);     I2C(INTER IC BUS)     UART(Universal Asynch ...