Vue基础代码案例 hello vue（一看就懂）以及vue代码为什么能在浏览器运行？
效果
<!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>Document</title>
<!--
比jQuery更好的框架。
vue
vue的基本使用
1 需要提供标签用于填充数据
2 引入vue.js 库文件
3 可以使用vue的语法做功能了
4 把vue提供的数据填充到标签里面
-->
<!--
1 实例参数分析
el 挂载， 关联
data 模型数据 值是一个对象。
2 插值表达式用法
将数据填充到HTML标签中
插值表达式支持基本的计算操作
3 vue代码运行原理分析
概述编程过程的概念 vue语法 原生语法
为什么能在浏览器运行？
之所以能在浏览器运行，
是因为vue 代码 通过vue框架，生成原生js代码，编译出来。计算机中的浏览器可以识别到。
-->
<!-- vue程序书写第一条 首先是引入vue.js ! -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 一个变量的输出 -->
<div>{{msg}}</div>
<!-- 插值表达式，叫法老专业，其实就是一个计算表达式 -->
<div>{{1 + 2}}</div>
<!-- 字符串拼接 -->
<div>{{msg + '-----' + 123}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data: {
msg:'hello vue'
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号