![cover](https://img-blog.csdnimg.cn/direct/0b48c8a7169b4d4798fb55b8c159e09c.png)
【vue核心技术实战精讲】1.1 Vue开篇介绍 + 1.2 Vue的起步 和 插值表达式
angular 09年,年份较早,一开始大家是拒绝谷歌公司团队研发 目前star:59.6kreact 2013年,用户体验好,社区大facebook公司团队研发目前star:135k·vue 2014年,用户体验好,API齐全,对初学者非常友好尤雨溪 目前star: 147kjquery库->DOM(操作DOM)+请求art-template库->模板引擎框架 = 全方位功能齐全简易的DOM体验
·
文章目录
准备开始
适应人群
有一定的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的起步 和 插值表达式
![](https://img-blog.csdnimg.cn/direct/6e36be1773704f93bc64cbbb71950882.png)
Stage 1:下载包,并放入项目中
![](https://img-blog.csdnimg.cn/direct/b0f1a995402e42a3a5eb3ab45d0c4362.png)
Stage 2:编码
- 1、引包
- 2、初始化
- 3、插值表达式调用
![](https://img-blog.csdnimg.cn/direct/3ca78c4b89e74f068d397bbde35d934b.png)
- 插值表达式-支持类型
![](https://img-blog.csdnimg.cn/direct/a6810c1c56164cbbabfedbbcbbb4e968.png)
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>
- 效果
![](https://img-blog.csdnimg.cn/direct/b058d9ffa8944a22879d7019fe52aa03.png)
![](https://img-blog.csdnimg.cn/direct/ffdfb3b11798416da8d65a36280185e3.png)
更多推荐
所有评论(0)