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,el,初识,vue,实例
From: https://www.cnblogs.com/wjqblog/p/17253258.html