Vue自学（1）2020-09-06

最新推荐文章于 2023-04-13 16:47:45 发布

Larrywjk

最新推荐文章于 2023-04-13 16:47:45 发布

阅读量182

点赞数

分类专栏：学习心得文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_44423801/article/details/108427769

版权

学习心得专栏收录该内容

39 篇文章 1 订阅

订阅专栏

自学Vue

Vue的概念——渐进式 JavaScript 框架
渐进式：
声明式渲染——>组件系统---->客户端路由——>集中式状态管理——>项目重构
javascript:
弱类型语言，是一种网页编程技术，用来向HTML页面添加动态交互效果。
框架
（1）框架与库的区别：
1. 框架：基础性服务（类似双向绑定和虚拟DOM）
2. 库：API
特点：易用，灵活，高效
———————————————————————
2.Vue基本用法
helloworld案例
传统是用js或jQuery事件绑定来变量赋值数据填充
Vue使用 {{}}，插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Document</title>
    <script src="../vue/dist/vue.js"></script>
</head>
<body>
<!-- 
    vue基本使用
    1.引入Vue.js文件
    2.需要提供标签用于填充数据
    3.绑定的对象，将Vue提供的数据填充到标签里  
 -->
 <div id='app'>
     <div>{{msg}}</div>
 </div>
 <script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello vue'
        }
    })
</script>
</body>
</html>

Vue代码——（通过Vue框架编译）——原生js

定义一个对象
var VM = new Vue（）
分析参数
(1)el: 元素的挂载位置（css的选择器或dom元素）
(2)data:模型数据（值是一个对象）

 data:{
            msg:'Hello vue'
        }

插值表达式
（1）支持简单的计算
（2）将数据填充到HTML标签中
编译原理：Vue语法（通过Vue.js）"翻译"原生js

Larrywjk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自学（1）2020-09-06

自学VueVue的概念——渐进式 JavaScript 框架渐进式：声明式渲染——>组件系统---->客户端路由——>集中式状态管理——>项目重构javascript:弱类型语言框架（1）框架与库的区别：1. 框架：基础性服务（类似双向绑定和虚拟DOM）2. 库：API特点：易用，灵活，高效———————————————————————2.Vue基本用法helloworld案例传统是用js或jQuery事件绑定来变量赋值数据填充Vue
复制链接

扫一扫

专栏目录