v u e

VIP文章呆桃啵啵猪

已于 2022-05-19 09:15:19 修改

阅读量968

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-05-18 20:53:42 首次发布

本文链接：https://blog.csdn.net/weixin_45701868/article/details/124824047

版权

v-bind属性操作class和style的实例代码

5.2 v-if、v-elseif、v-else

7.2 理解handler方法及immediate属性

7.3 理解deep属性

7.4 watch 和 computed的区别

7.5计算属性和watch的区别

7.6computed和methods的区别？

8.VUE生命周期钩子

8.1 vue数据是怎么驱动视图的

8.2 vue生命周期钩子

9.VUE完整示例new vue()参数详解

1.理解MVVM思想

什么是MVVM？MVVM是Model-View-ViewModel的缩写。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

2.vue.js介绍

Vue是一套用于构建用户界面的渐进式的轻量级框架
Vue是MVVM设计模式的具体实现方案
Vue只关注视图层，便于与第三方库或既有项目整合
Vue可以与现代化的工具链和各种类库结合使用，为复杂的SPA提供驱动

3.vue起步

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue的引入</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--{
  {}} vue的语法插值表达式, 两对大括号内部对应的变量是vue对象的data属性-->
            {
  {message}}
        </div>
    </body>
    <script>
        //创建vue对象
        let app = new Vue({
            //vue对象挂载到id='app'的元素上
            el: "#app",
            //data是vue数据属性, 定义的数据统一放到data中
            data: {
                message: "hello vue",
            }
        });
    </script>
</html>

4.模板语法

Vue.js中使用的是基于html的模版语法，可以将Dom元素绑定至Vue实例中的数据。
页面中模版即就是通过{ {}}方式来实现模版数据绑定。

4.1 数据绑定的方式

单向绑定
- 方式1：使用两对大括号{ {}}
- 方式2：使用v-text、v-html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>插入data中message属性名对应值:{
  {message}}</p>
            <!--v-html  [看做超链接]-->
            <p>v-html指令插入html代码:<span v-html="rawHtml"></span></p>
            <!--v-text  [看做文本获取代码]-->
            <p>v-text指令插入文本代码:<span v-text="rawHtml"></span></p>
            <!--v-once  [数据只绑定一次]-->
            <p v-once>v-once绑定一次{
  {message}}</p>
        </div>
    </body>
    <script>
        let app = new Vue({
            //vue对象挂载到id='app'元素上
            el: "#app",
            //定义数据
            data: {
                message: "hello vue",
                rawHtml: "<a href='http://www.baidu.com'>百度</a>"
            }
        })
    </script>
</html>

双向绑定
- v-model指令实现

最低0.47元/天解锁文章

呆桃啵啵猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v u e

目录1.理解MVVM思想2.vue.js介绍3.vue起步4.模板语法4.1 数据绑定的方式单向绑定双向绑定4.2 其他指令5.常用指令5.1 v-bindv-bind属性数据绑定代码：v-bind属性操作class和style的实例代码5.2 v-if、v-elseif、v-else5.3 v-for5.4 v-on6.计算属性get和set方法7.监听属性7.1 监听属性watch7.2 理解handler方法及immedi
复制链接

扫一扫