Vue学习相关
-
概述
声明式渲染–>组件系统–>客户端路由–>集中式项目管理–>项目构建 -
特点
①.易用:熟悉HTML,CSS,js等之后,上手特别快
②.灵活:在一个库一套完整框架之间自如伸缩
③.高效:20kb 运行大小,超快虚拟的DOM -
基本使用步骤
1.需要提供标签用户填充数据
2.使用Vue.js库文件
3.可以使用vue的语法做功能了
4.把vue提供的数据填充到标签里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{1+2+3}}</div>
<div>{{msg+'hahaha'+'123'}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
Vue的基本使用步骤
1、需要提供标签用于填充数据
2、引入vue.js库文件
3、可以使用vue的语法做功能了
4、把vue提供的数据填充到标签里面
*/
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue'
}
})
</script>
</body>
</html>
-
细节分析
1.实例参数分析- el:元素挂载位置(可以是CSS选择器/DOM元素)
- data: 模型数据是一个对象
2 插值表达式用法
- 将元素填充到HTML标签当中
- 插值表达式支持基本的数据操作
3 Vue代码的原理分析
Vue语法-->原生js语法(中间使用Vue框架)