一.Vue的概述
- Vue:渐进式JavaScript框架
声明式渲染→组件系统→客户端路由→集中式状态管理>项目构建
二.Vue的基本使用
Vue的基本使用步骤
- 需要提供标签填充数据
- 引入vue.js库文件
- 使用Vue语法模板
- 把Vue提供的数据填充到标签里面
1、提供标签用于填充数据
<div id="app">
<div></div>
</div>
2、引入vue.js库文件
<script src="js/vue.js"></script>
3、使用vue的语法写功能
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
4、将vue提供的数据填充到标签里
<!-- 1、提供标签用于填充数据 -->
<div id="app">
<!-- 4、将vue提供的数据填充到标签里 使用插值表达式{
{
}}，作用就是将数据填充到指定的标签的位置。 -->
<div>{
{
msg}}</div>
<div>{
{
1 + 1}}</div>
</div>
- 完整代码如下
<div id="app">
<!-- {
{
}}代表插值表达式用法 -->
<!-- 把数据填充到html中，可以进行计算操作 -->
<div>{
{
meg}}</div>
<div>{
{
3+2}}</div>
<div>{
{
meg+'....'+123}}</div>
</div>
<script src="js/vue.js"></script>
<script>
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
/*el：元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。 */
el: '#app', //el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
data: {
/* data：绑定数据（值是一个对象）用于数据提供 */
meg: 'Hello vue!'
}
})
</script>
三. Vue代码运行原理
