vue教程-介绍与使用

vue介绍

介绍

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

安装

最简单的例子就是，创建一个html文件，在文件中引入vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

创建实例

创建 Vue 实例，初始化渲染的核心步骤:
        1.准备容器
        2.引包(官网)-开发版本/生产版本
        3.创建 Vue 实例 new Vue()
        4.指定配置项 el data => 渲染数据
                ①el指定挂载点，选择器指定控制的是哪个盒子
                ② data 提供数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Domcument</title>
</head>
<body><!--1.准备容器2.引包3.创建实例4.添加配置项--><div id="app">{{ foo }}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {foo: 'hello vue！'}});</script>
</body>
</html>

结果：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

插值表达式

插值表达式是一种vue的模版语法。

作用

利用表达式进行插值，渲染到页面中

语法

注意点

1.使用的数据必须存在

2.支持的是表达式，而非语句，比如：if、for......

3.不能在标签属性中使用{{}}进行插值

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Domcument</title>
</head>
<body><div id="app"><p>{{ nickname }}</p><p>{{ nickname + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ firend.name }}</p><p>{{ firend.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: 'vue',age: '20',firend: {name: 'json',desc: '热爱学习'}}});</script>
</body>
</html>

结果：

响应式

数据修改，视图自动更新

data中的数据，最终会被添加到实例上：

1.访问数据：“实例名.属性名”

2.修改数据：“实例名.属性名 = 值”

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Domcument</title>
</head>
<body><div id="app"><p>{{ nickname }}</p><p>{{ count }}</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: 'vue',count: 20}});</script>
</body>
</html>

结果：