Vue的初步基本使用

最新推荐文章于 2022-04-12 17:07:30 发布

杨大脸I

最新推荐文章于 2022-04-12 17:07:30 发布

阅读量98

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41176055/article/details/111033827

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue学习相关

概述
声明式渲染–>组件系统–>客户端路由–>集中式项目管理–>项目构建

官网地址:https://cn.vuejs.org/v2/guide/
特点
①.易用:熟悉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框架)
```

杨大脸I

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的初步基本使用

Vue学习相关概述声明式渲染–>组件系统–>客户端路由–>集中式项目管理–>项目构建官网地址:https://cn.vuejs.org/v2/guide/特点①.易用:熟悉HTML,CSS,js等之后,上手特别快②.灵活:在一个库一套完整框架之间自如伸缩③.高效:20kb 运行大小,超快虚拟的DOM基本使用步骤1.需要提供标签用户填充数据2.使用Vue.js库文件3.可以使用vue的语法做功能了4.把vue提供的数据填充到标签里面<!D
复制链接

扫一扫