Vue2教程001：初识Vue

文章目录

1、初识Vue
- 1.1、Vue2前言
- 1.2、创建Vue实例
- 1.3、插值表达式
- 1.4 Vue响应式特性

1、初识Vue

1.1、Vue2前言

Vue是什么？

概念：Vue是一个用于构建用户界面的渐进式框架。

Vue的两种使用方式：

Vue核心包开发
1. 场景：局部模块改造
Vue核心包&Vue插件工程化开发
1. 场景：整站开发

1.2、创建Vue实例

步骤：

准备容器
引包
创建vue实例
指定配置项->渲染数据
- el指定挂载点
- data提供数据

实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--创建Vue实例，初始化渲染1、准备容器（Vue所管理的范围）2、引包（开发版本和生产版本）3、创建实例4、添加配置项=》完成渲染
-->
<div id="app"><!--这里将来会编写一些用于渲染的代码逻辑-->{{msg}}
</div>
<!--引入的是开发版本的包-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 一旦引入VueJS核心包，在全局环境下，就有了Vue构造函数const app = new Vue({// 通过el配置选择器，指定Vue管理的是哪个盒子el: '#app',// 通过data提供数据data: {msg: 'Hello Vue2'}})
</script>
</body>
</html>

1.3、插值表达式

插值表达式{{}}是一种Vue的模板语法。

作用：利用表达式进行插值，渲染到页面中。
语法：{{}}

注意：

使用的数据必须讯在（data）
支持的是表达式，而非语句，比如if、for
<p>{{if}}</p>

不能在标签属性中使用{{}}插值
<p title="{{username}}">我是p标签</p>

实例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><p>{{nickname}}</p><p>{{nickname.toUpperCase()}}</p><p>{{nickname + ' 你好'}}</p><p>{{nickname}}{{age >= 18 ? '成年了' : '未成年'}}</p><p>{{friend.name}}--{{friend.desc}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {nickname: 'tom',age: 19,friend:{name: 'gg',desc: '热爱唱跳rap'}}})
</script>
</body>
</html>