前端-初识Vue实例
一.准备容器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>二.引包
Vue2官网
https://v2.cn.vuejs.org/v2/guide/
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
三.创建Vue实例new Vue()
四.指定配置项
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{msg}}</div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {msg: '你好Vue！',}})</script></body></html>
五.插值表达式
{{}}是插值表达式，插值表达式是一种Vue的模板语法
1.作用：利用表达式进行插值，渲染到页面中，表达式是可以被求出值的代码，JS引擎会将其计算出一共结果。
2.语法：{{表达式}}
3.注意点：
使用的数据必须是存在的。
插值表达式中只支持表达式，而不是语句。
不能子啊标签中使用插值表达式。
