初识Vue
vue是动态构建用户界面的渐进式JavaScript框架：作者是尤雨溪
Vue的特点：
遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目
与其他前端框架的联系：
借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟DOM技术
<!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>初识Vue</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
准备好一个容器
容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
root容器里的代码被称为vue模板
-->
<div id="root">
<!--
注意区分：js表达式和js代码（语句）
1.表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方；
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码（语句）
(1). if(){}
(2). for(){}
{{xxx}}中要写js表达式，且xxx可以自动读取到1data中的所有属性；
一旦data中的数据发生改变，那么模板中用到该数据的地方也1会自动更新
-->
<h1>Hello,{{name.toUpperCase()}},{{address}},{{1+1}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false//阻止vue在启动时生成生产提示
//创建Vue实例(实例和容器一一对应)
new Vue({
el:'#root',//el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
data:{//data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
name:'at尚硅谷',
address:'重庆哪个'
}
})
</script>
</body>
</html>
分类:
从零开始的vue学习
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术