网站建设 图片栏目介绍怎么发布自己的网站
什么是Vue？
Vue是什么：是一个用于构建用户界面的渐进式框架
什么是构建用户界面：基于数据动态渲染页面
什么是渐进式：循序渐进的学习
什么是框架：一整套完整的项目解决方案
创建Vue实例
核心步骤（4步）：
-
准备容器
-
引包（官网） — 开发版本/生产版本
-
创建Vue实例 new Vue()
-
指定配置项，渲染数据
-
el:指定挂载点
- data提供数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js Example</title>
</head>
<body><div class="box2"></div><div class="box"></div><div id="app"><p>{{ nickname }}</p><p>{{ nickname.toUpperCase() }}</p><p>{{ nickname + '你好' }}</p><p>{{ age >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p><p>{{ 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: 'hello sx',age: 18,friend: {name: 'wyx',desc: '热爱sx'}}})</script>
</body>
</html>
插值表达式 {{}}
插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据
作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果
以下的情况都是表达式：
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()语法
插值表达式语法：{{ 表达式 }}
<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p> //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>效果图
总结
1.插值表达式的作用是什么
利用表达式进行插值，将数据渲染页面中
2.语法是什么
{{ 表达式 }}
3.插值表达式的注意事项
-
使用的数据要存在
-
支持的是表达式，而非语句if...for
-
不能在标签属性里面使用