【vue核心技术实战精讲】1.1 Vue开篇介绍 + 1.2 Vue的起步和插值表达式

文章目录

- 准备开始
- 适应人群
- vue 框架学习路线
- 一、vue 基础
- - 1、历史介绍
  - 2、前端框架与库的区别?
- 二、vue的起步和插值表达式
- - Stage 1：下载包，并放入项目中
  - Stage 2：编码
  - Stage 3：源码与效果

准备开始

适应人群

有一定的HTML/CSS/JavaScript+ES6+基础开发人员

vue 框架学习路线

html/css/is => es6
vue基础+组件化开发 => vue核心插件vue-router和vuex
搜索社区大牛的资料继续深入学习

一、vue 基础

1、历史介绍

angular 09年，年份较早，一开始大家是拒绝谷歌公司团队研发目前star:59.6k
react 2013年,用户体验好，社区大 facebook公司团队研发目前star:135k·
vue 2014年，用户体验好，API齐全，对初学者非常友好尤雨溪目前star: 147k

2、前端框架与库的区别?

jquery库->DOM(操作DOM)+请求
art-template库->模板引擎
框架 = 全方位功能齐全
- 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + 数据管理。
KFC的世界里,库就是一个小套餐,框架就是全家桶
代码上的不同
- 一般使用库的代码，是调用某个函数，我们自己把控库的代码。
- 一般使用框架，其框架在帮我们运行我们编写好的代码
  - 框架:初始化自身的一些行为
    - 执行你所编写的代码
    - 施放一些资源

二、vue的起步和插值表达式

进入官网-V2

Stage 1：下载包，并放入项目中

Stage 2：编码

1、引包
2、初始化
3、插值表达式调用

插值表达式-支持类型

Stage 3：源码与效果

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue的起步和插值</title>
</head><body><div id="app"><h2>{{ msg }}</h2><h3>{{ 2 }}</h3><h3>{{ "hello" }}</h3><h3>{{ {id:1} }}</h3><h3>{{ 1>2 ? '真的':'假的'}}</h3><h3>{{ txt.split('').reverse().join('') }}</h3><h1>{{ getContent() }}</h1><h1>{{ msg3 }}</h1></div><!-- 1.引包 --><script src="./vue.js"></script><script>// console.log(Vue);// 2.初始化const vm = new Vue({el: '#app',// 数据属性data: {msg: 'hello vue',txt: 'hello',msg2: 'content',msg3:'<p>插值语法</p>'},// 存放的是方法methods: {getContent() {return this.msg + ' ' + this.msg2;}}});console.log(vm.msg);</script></body></html>