Vue2框架基础知识1

VIP文章 yandajiangjun

已于 2023-01-14 20:49:01 修改

阅读量570

点赞数 1

文章标签： vue.js 前端

于 2023-01-14 19:39:01 首次发布

本文链接：https://blog.csdn.net/yandajiangjun/article/details/128688336

版权

Vue介绍

介绍
1. 渐进式 JavaScript 框架（渐进式：项目中可以逐步使用vue框架可以使用一部分或者是整个项目）
2. 框架单页面的应用程序（vue项目入口：只有一个页面 index.html ）
3. 跳转的页面路由功能- 路由（其他页面组件）
4. 框架里面使用的是虚拟DOM 没有js BOM DOM
特点
1. 易用
2. 灵活
3. 高效
优缺点
1. 优点：易用灵活高效易于维护
2. 缺点：
  1. 首页加载速度慢
  2. 不利于搜索引擎优化

Vue使用

使用vue（局部使用）
1. 引入 Vue 的cnd网址或者是下载到本地js文件（类似：jquery.js）
2. 创建vue实例
3. 代码演示

    <body>
        <h2>普通的css布局实现的项目</h2>
        <p>测试vue使用在项目中，不是整个项目用vue写的 局部使用</p>
        <p id='xx'>xxx--{
  { msg }}</p>

        <!-- 使用vue  -->
        <div id='app'>
            <p>vue的区域了 app-- </p>
            <p>获取vue数据：{
  { msg }}</p>
            <p>{
  { arr }}</p>
        </div>


        <!-- 创建vue实例 -->
        <script>
            const vm = new Vue({
                el:'#app',//获取element元素 
                data:{
                    msg:'hello vue