Vue框架

最新推荐文章于 2022-09-24 19:34:57 发布

APinBom

最新推荐文章于 2022-09-24 19:34:57 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/qq_51649346/article/details/121401918

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2021.11.18

学习完三剑客后基本上就要开始学习框架了，先从用的最广泛的Vue框架开始下手
vue.js 是一个以数据处理为核心的前端框架 ( 模块化，组件 .vue)

vue.js   个人开发   支付宝  尤雨溪
模式：MVVM（vue.js）
    M ：model  数据层
    V:  view   视图层(html+css)
    VM：viewModel  薄片层:是链接数据层和视图层的薄片层（vue的实例 )

学习Vue推荐官方文档和视频，不理解的地方B站看视频，简单介绍下Vue的基本功能

一、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        <span v-bind:title="message">
            鼠标悬停特效
        </span>
        
    </div>
    <script type="text/javascript">
           var sj=new Vue({
        el:'#app',
        data:{//数据
            message:'页面加载于'+new Date().toLocaleString()//返回本地时间日期

        }
    })
    </script>
</body>
</html>

这是一个最简单最基础的Vue,先在<script>里用src="vue.js"这样vue就相当于导入了，就可以开始用vue的框架了
一、v-bind，这个标签的作用就是可以动态绑定，不写死内容，可以通过后面对此标签的内容进行修改,语法格式就是在标签前加上v-bind
二、Vue的基本格式
var a=new Vue({
el:’#app’//这里先说简单通俗易懂一点就是用来寻找前面的元素id，也就是页面上已经存在的一个dom元素作为挂载目标
data:{}//就是写数据的地方
})

二、数据的基本方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="app">
        {{a}}--{{b}}
    </div>
    <script type="text/javascript">
        var data={
            a:1,
            b:"1231"
            
        }//Object.freeze(data)此方法会阻止修改现有属性
                      
        var vm=new Vue({
            el:'#app',
            data:data
        });
        //data.a='hi';
        //vm.a==data.a
        //vm.$data===data
        //vm.$el=documentElementById("app")
        //$的作用是以便与用户定义的属性区分开来
        vm.a='GG';
        
        vm.$watch('b',function (newVal,oldVal){/*观察函数，三个参数:
        a为要观察的函数对象,newVal为最新值，oldVal为最初值
        */
       console.log(newVal,oldVal)
       /*
       经过测试，更改值必须放在$watch方法后面才能捕捉到，在$watch之前写
       无法捕捉到任何值，而且只能捕获到初始值和最新修改的值
       */
    
    })
    vm.$data.b="555"
    vm.b="666"
    </script>
</body>
</html>

栗子：假如我要对上述程序中的a的值进行修改，data.a=XXX,vm(你定义的函数名).a=XXX,两者结果是相同的
$的作用是以便与用户定义的属性区分开来,比如我在Vue里写的是data:data,那么
$data是我在Vue里命名的data，也不是值data
$watch方法，属于一个观察函数，用来观察一个元素的初始值和最终值

三、判断语句if和show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type='text/javascript'></script>
</head>
<body>
    <div id="app">
<div v-if="type==='A'">
    A
</div>
<div v-else-if="type==='B'">
    B
</div>
<div v-else-if="type==='C'">
    C
</div>
<div v-else>
    NOT A/B/C
</div>   
<h1 v-show="ok">Hello!</h1>

    </div>
    <script type="text/javascript">
        /*v-show属性始终存在，v-show属性的作用就是切换元素的display属性
          **v-show属性不支持<template>元素，也不支持v-else
        v-if属性属于判断语句
        
        */
        var vm=new Vue({
            el:'#app',
            data:{
                type:'C',
                ok:"true"
            }

        })
    </script>

</body>
</html>

v-show属性的作用就是将元素的display属性进行切换

四、列表渲染for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type="text/javascript"></script>
</head>
<body>
    <ul id="app">
    <li v-for="item,index in items" v-bind:key="index"><!--
    item被选数据元素的迭名
    items数组名
    index数据元素的指数，即序号
-->
        {{index}}--{{item.mes}}
    </li>
    </ul>
    <ul id="app2">
        <li v-for="Value,index,key in check" :key="key">
          {{index}}--{{key}}--{{Value}}<!--同理，此处用的是键-->
        </li>
    </ul>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                items:[
                    {mes:"FOO"},{mes:"FFF"}//items数据数组里面包含键和值
                ]
            }
        })
        var vm2=new Vue({
            el:'#app2',
            data:{
                check:{
                    name:"小明",
                    sex:"男",
                    age:"20"
                }//键值对
            }
        })
    </script>
</body>
</html>

APinBom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架

2021.11.18学习完三剑客后基本上就要开始学习框架了，先从用的最广泛的Vue框架开始下手vue.js 是一个以数据处理为核心的前端框架 ( 模块化，组件 .vue)vue.js 个人开发支付宝尤雨溪模式：MVVM（vue.js） M ：model 数据层 V: view 视图层(html+css) VM：viewModel 薄片层:是链接数据层和视图层的薄片层（vue的实例 )学习Vue推荐官方文档和视频，不理解的地方B站看视频，简单介绍
复制链接

扫一扫