Vue入坑篇（一） --详细

最新推荐文章于 2023-06-05 20:02:20 发布

CCIEJohn_zhou

最新推荐文章于 2023-06-05 20:02:20 发布

阅读量790

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/CCIEJohn_zhou/article/details/89036773

版权

本文介绍了Vue.js的基本概念，包括它作为前端框架的优势，核心概念——避免直接操作DOM，以及MVVM模式。文章详细阐述了Vue.js的数据双向绑定原理，并通过案例展示了基础指令的使用，如v-bind、v-on、v-model、v-for等，帮助读者理解Vue.js的视图和数据交互机制。

摘要由CSDN通过智能技术生成

一.什么是Vue.js?

1. 前端三大流行框架： Vue.js Angular.js React.js

2.Vue.js是目前最火的前端框架，React.js是最流行的前端框架（React.js可以进行网页开发和手机App的开发，Vue.js也是可以的，但是Vue.js进行手机App开发需要借助Weex)。总的来说Vue.js是一套用于构建用户界面的框架，只关注视图层。方便于第三方类库以及既有项目整合来做大项目。

3.Vue的核心概念：

在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑。

科普前端发展：前端提高开发效率的发展历程：原声JS-->JQuery之类的类库--->前端模板引擎--->Angular.js/Vue.js（能够帮我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念{通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了}）

了解：框架和库的区别：

框架：有一套完整的解决方案；对项目侵入性较大；项目如何需要更换框架，则需要重新架构整个项目。

库（插件）：提供某一个小功能，对项目入侵性小，如果某个库无法完成某些需求，可以很容易切换到其他实现需求。

了解：MVC和MVVM之间的区别：

MVC：是后端的分层开发的概念

MVVM：是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端

的视图层分为了三部分，Model,View,VM ViewModel

二.了解和区分MVC以及MVVM

MVC：

View视图层：用户操作页面，每一个操作都会进行后端的网络请求，发送给app.js {V层}

app.js:项目的入口模块(一切请求都要进入这里进行处理。)

router.js: 路由器分发处理模块（分发路由）

Controller：业务逻辑处理层。（封装了一些业务逻辑的代码） {两者组成Controller}

Model：操作数据库，执行对应的SQL语句，进行数据的CRUD. {M层}

MVVM：前端视图层的开发思想，主要把每个页面，分成了M,V和VM，其中VM是MVVM思想的核心。VM是M和V之间的调度者。

M：保存每个页面中的单独数据（从服务器上发送的数据）。

V:每个页面中的HTML结构。

VM：调读者，分割V和M。每次存取数据都要经过VM的代办。

取数据：M-->VM-->V

存数据：V--->VM-->M

MVVM思想的好处：前端页面使用MVVM的思想，让我们开发更高效，因为MVVM提供了数据的双向绑定。

那么来介绍一下Vue.js的数据双向绑定：vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。数据双向绑定一般是对UI控件来说。

案例1：

<body>

<!--Vm实例所控制的这个元素区域，就是我们的V-->
<div id="app"> 
<p>{
  {msg}}</p>

</div>



<script>
//注意：我们new出来的这个vm对象，就是我们MVVM中VM调度者。
var vm=new Vue({
//表示当前我们new的这个Vue实例，要控制页面上的哪个区域（以id区分）
     el:'#app', 
//这里的data就是MVVM中M，专门用来保存每个页面的数据的。
//通过Vue提供的指令，很方便的就能把数据渲染到页面上，不必再手动操作DOM元素了【前端的Vue之类框架，不提倡我们去手动操作DOM元素了】
     data:{ 
             msg:'欢迎学习Vue',
           }

})


</script>

</body>

三.Vue.js的基础指令

1.插值表达式:{ {}}


<script src="vue-2.4.0.js"></script>
<script>
    //new一个vm实例
    var vm=new Vue({
        el:'#area',
        data:{
            msg:'关注John_Zhou得福利！！',
            msg2:'<h4>我是h4我最大！</h4>',
            msg3:'input标签',
        },
        methods:{
            /*
            //ES6以前的写法
            show:function(){
                alert("v-on事件绑定机制成功！！")
            }
            */
            //ES6的写法
            show(){
                alert("v-on事件绑定机制成功！！")
            },
        }
  
})
</script>

<!--一般不单独使用插值表达式，因为如果vue.js加载过慢，造成页面刷新时msg的值闪烁问题 -->
<p>{
  {msg}}</p>

2.v-cloak （解决插值表达式闪烁问题）

<!-- v-cloak指令 可以解决闪烁问题-->
<p v-cloak>{
  {msg}}</p>

3.v-text

<!-- v-text 本身没有插值闪烁问题 -->
<!-- v-text里的内容会覆盖掉标签里的所有内容，插值表达式{
  {}}只会覆盖掉自己占位符上的内容 -->
<p v-text="msg">===</p>

4.v-html （用于属性值里面有标签的情况下，保证标签字符串不会被当字符串内容在页面输出）

最低0.47元/天解锁文章

CCIEJohn_zhou

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录