初识vue

最新推荐文章于 2023-04-03 14:54:02 发布
最新推荐文章于 2023-04-03 14:54:02 发布
阅读量218 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QZ9420/article/details/110527177
版权

一、vue原始代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--根组件的模板-->
    <div id="app">
        <!-- 插值表达式（小胡子写法） 在小胡子中就可以使用vm中的数据了 -->
        <h1>{{ msg }}</h1>
    </div>

    <script src="../js/vue-development.js"></script>
    <script>
        // vm是Vue对象  根组件   vue中基本上很少操作DOM   JQ中需要大量的操作DOM
        let vm = new Vue({
            el:"#app", // el给根组件指定模板
            data(){   // data选项 data是用来给模板提供数据  data需要返回一个对象
                return {   // data中需要返回一个对象  数据就放到此对象中
                    msg:"大家一起玩vue~"  // msg是数据  数据以后，叫状态
                }
            }
        });
    </script>
</body>
</html>

vue的双向数据绑定（v-model)

<body>
    <div id="app">
        <h2>{{ msg }}</h2>
        <!-- 在模板中的标签中，可以添加很多自定义属性 -->
        <!-- vue中发明了一些自定义属性，通常是以v-打头，这些自定义属性有一个别名，叫指令  -->
        <!-- 不同的指令有不同的作用，v-model的作用就是为了实现双向数据绑定 -->
        <!-- 一向：把M中的数据绑定模板上 在input上，绑定到vlaue上的，当M中的数据改变了，V会自动刷新-->
        <!-- 另一向：当V中的改变了状态，M中的数据也会更新-->
        <input type="text" v-model="msg">
    </div>
    <script src="../js/vue-development.js"></script>
    <script>
        // 如何让M中的数据改变？
        // 答：可以使用vm.msg = "xxx"  vm代理data中的所有数据
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    msg:"hello vue"
                }
            }
        })
    </script>
</body>

插值表达式（小胡子语法）

    就叫它小胡子语法，说白了，就是 {{ }}  在{{ }}中可以放data中的数据
    在{{ }}中可以对数据进行简单地运算，在小胡子，只能放表达式（任何有值的内容都是表达式）
    小胡子中，只能放data中定义好的数据
    小胡子中，可以放三元运算符
    小胡子中，还可以去调用一个函数
    小胡子中，不能放语句

数据单向绑定：

    把数据作为文本结点：
        方式一：通过小胡子就可以把M中的数据绑定到V上的。 小胡子就是v-text的语法糖
        方式二：v-text也可以绑定数据到标签中，用的不多   v-text是一个指令  在vue中指令都是以v-打头
            v-text指令绑定数据时，数据如果是一片html代码，v-text并不会解析
        方式三：v-html  用的时候的要慎重 ？？？  基本上也用不到
            也可以把data中的数据绑定到模板上的，如果是数据是是一片html代码，v-html会解析
    把数据作为属性结点：
        v-bind: 可以把data中的数据，绑定到模板中的属性上，作为属性节点
        作用：v-bind:id="item"
        v-bind可以简写：  :id="item"

style绑定：

只需要记住
   1）:style后面绑定一个对象
   2）css属性如果是中划线，需要变成小驼峰

       <body>
    <div id="app">
        <div style="width: 100px; height: 100px; background: red;"></div>
        <div v-bind:style="{width:w, height:h, background:c}"></div>
        <h1 v-bind:style="{fontSize:fs}">{{ msg }}</h1>
    </div>
    <script src="../../js/vue-development.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:"大家一起玩转vue~",
                    w:"110px",
                    h:"110px",
                    c:"yellow",
                    fs:"50px"
                }
            }
        });
    </script>
</body>

class绑定：

写法1：:class="o"   o是data中的数据（状态）  目的：状态在后面可以动态发生改变
写法2：控制一个类没或者没有 class后面绑定一个三元运算符，控制此标签有没有这个类
写法3：一个标签可以绑定多个类  :class后面跟上一个对象  :class="{box:flag,box3:flag2}"
写法4：在:class后面跟一个数组 <p :class="['box','box3']">vue</p>

总结：

1）:class 后面跟一个data中的状态 <div :class="o"></div>
2）:class 后面可以跟一个三目运算符   <p :class="flag ? 'box3': ''">{{ msg }}</p>
3）:class 后面可以跟一个对象  是对象，意味着，我要绑定多个css类
4）:class 后面可以跟一个数组  是数组，意味着，我要绑定多个css类, 数组中也可以状态

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .box3{
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--直接给div加上一个box类 如果这样写，class后面的box是写死的-->
        <div class="box"></div>

        <!-- class绑定的数据也需要是一个状态 -->
        <div v-bind:class="o"></div>

        <!-- class后面绑定一个三元运算符，控制此标签有没有这个类 -->
        <p :class="flag ? 'box3': ''">{{ msg }}</p>

        <!--一个标签上面绑定多个类-->
        <!--直接在p标签上绑定了两个类，也是写死的-->
        <p class="box box3">hello</p>
        <p :class="{box:flag,box3:flag2}">hello</p>

        <!--在:class后面跟一个数组  []中放的是css类-->
        <p :class="['box','box3']">vue</p>
    </div>

    <script src="../../js/vue-development.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:"大家一起玩转vue~",
                    o:"box",
                    flag:true,
                    flag2:true
                }
            }
        });
    </script>
</body>

条件相关的指令：

v-if  控制是否创建和销毁
    v-if后面普通也是跟状态  控制一个元素是否渲染出来，是否销毁掉
    v-if可以控制一个盒子创建和销毁
    和v-if配对的，还有v-else 和 v-else-if
v-show 控制样式实现显示和隐藏
    它是控制盒子的样式，来实现盒子的隐藏和显示

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <!--<div v-if="flag" class="box">这是一个大盒子</div>-->
        <!--<div v-show="flag" class="box">这是一个大盒子</div>-->

        <!--<div v-if="flag">今天讲vue</div>
        <div v-else>明天讲react</div>-->

        <div v-show="flag">今天休息</div>
        <div v-show="!flag">明天休息</div>
    </div>
    <script src="../../js/vue-development.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    msg:"大家一起玩转vue~",
                    flag:true
                }
            }
        });
    </script>
</body>

v-for指令：

v-for循环数组：<li v-for="(item,index) in news">  item是数组中每一项数据  index是索引
v-for循环对象：<td v-for="(value,key) in wangcai">{{ value }}</td>
v-for循环整数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in news">
                {{ item }}   索引：{{ index }}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in movies">
                电影名字：<strong>{{ item.name }}</strong>  ---->  电影的链接： <a :href="item.link">{{item.name}}</a>
            </li>
        </ul>
        <hr>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>成绩</th>
            </tr>
            <tr>
                <td v-for="(value,key) in wangcai">{{ value }}</td>
            </tr>
            <tr>
                <td v-for="(value,key) in wangcai">{{ key }}</td>
            </tr>
        </table>
        <hr>
        <p v-for="(item,index) in 10">
            item:{{ item }} --------> index:{{ index }}
        </p>
    </div>
    <script src="../../js/vue-development.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    news:["新闻1","新闻2","新闻3","新闻4","新闻5","新闻6","新闻7"],
                    movies:[
                        {name:"a",link:"www.baidu.com"},
                        {name:"b",link:"www.baidu.com"},
                        {name:"c",link:"www.baidu.com"},
                        {name:"d",link:"www.baidu.com"},
                        {name:"e",link:"www.baidu.com"},
                    ],
                    wangcai:{ name:"wc",age:100,address:"bj",score:10 }
                }
            }
        });
    </script>
</body>
</html>

v-for嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <table border="1">
            <tr>
                <th>姓名</th>
                <th v-for="(item,index) in subjects">{{ item }}</th>
            </tr>
            <tr v-for="(item,index) in scores">
                <td>{{item.name}}</td>
                <td v-for="(score,idx) in item.score">{{score}}</td>
            </tr>
        </table>
    </div>
    <script src="../../js/vue-development.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    subjects:["语文","数学","英语"],
                    scores:[
                        {name:"wangcai",score:[80,90,50]},
                        {name:"xiaoqiang",score:[20,70,50]},
                        {name:"lihua",score:[50,80,20]},
                        {name:"limei",score:[70,40,80]},
                        {name:"qiqi",score:[80,60,70]},
                    ]
                }
            }
        });
    </script>
</body>
</html>

事件绑定：

在vue中给标签绑定事件，使用v-on指令。<button v-on:click="f1">点我</button>
v-on可以简写，简写成@，<button @click="f1">点我</button>

事件绑定传参：<button @click="f2(1,2)">点我3</button>

如果不传参：
    <button @click="f1">点我2</button>
    <button @click="f1()">f1()</button>
    在vue中绑定事件，如果不传参数，()可以写，可以不写。

要获取数据事件：
    1） 如果在事件绑定时，不写()，那么监听器的第1个参数就是事件对象 <button @click="f3">f3</button>
     f3(e){
        console.log(e)
     }
    2） 如果在事件绑定时，写了()，那么监听器的第1个参数就不是事件对象，第1个参数就变成普通的形参

    如果想传参，又想获取事件对象：  需要手动地写$event，$event就代表事件对象
        <button @click="f3(1,$event)">f3(1,$event)</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button v-on:click="f1">v-on:click=f1</button>
        <button @click="f1">f1</button>
        <button @click="f1()">f1()</button>
        <button @click="f2(1,2)">f2(1,2)</button>
        <hr>
        <h2>事件对象</h2>
        <button @click="f3">f3</button>
        <button @click="f3()">f3()</button>
        <button @click="f3(1)">f3(1)</button>
        <button @click="f3(1,$event)">f3(1,$event)</button>
    </div>

    <script src="../js/vue-development.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                }
            },
            methods:{  // methods主要是给模板提供方法
                f1(){
                    alert("f1")
                },
                f2(a,b){
                    alert(a+b)
                },
                f3(a,e){
                    console.log(a)
                    console.log(e)
                }
            }
        });
    </script>
</body>
</html>

事件修饰符：

.prevent   阻止默认事件
.stop   阻止事件冒泡
....

按键修饰符：

每一个按键都有特殊的符号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="one">one</button>
        <button @click="two('wangcai')">two("wangcai")</button>
        <button @click="three(18,$event)">three(18,$event)</button>
        <hr>
        <div style="width: 200px; height: 200px; background-color: red;" @click="five">
            <!--@click.stop 阻止事件冒泡-->
            <button @click.stop="four">son</button>
        </div>
        <hr>
        <a href="http://wwww.xxx.com" @click.prevent="six">xxx</a>
        <hr>
        <!--@keyup.enter 表示你按了回车键，就触发  alt  shift tab ....-->
        <input type="text" @keyup.enter="seven">
    </div>

    <script src="../js/vue-development.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return {
                    /*one(){   // 监听器放data中也OK    一般情况，不要放data中
                        console.log("one")
                    }*/
                }
            },
            methods:{  // methods主要是给模板提供方法
                one(e){
                    console.log(e)
                    console.log(e.target.innerHTML)
                },
                two(name){
                    console.log(name)
                },
                three(age,e){
                    console.log(age)
                    console.log(e)
                },
                four(e){
                    // e.stopPropagation(); // 使用事件对象来阻止事件冒泡
                    console.log("button four")
                },
                five(){
                    console.log("div five")
                },
                six(e){
                    // e.preventDefault(); // 使用事件对象来阻止默认事件
                    console.log("a标签的点击事件")
                },
                seven(){
                    console.log("按键抬起来")
                }
            }
        });
    </script>
</body>
</html>
予倾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初识Vue
前端程序员辉哥的博客
10-19 392
什么是Vue? Vue是一个渐进式javascript框架,拥有自己规则的语法 什么是渐进式 就是逐渐进步,想用什么就用什么,不必全都使用 vue渐进式:vue从基础开始,会循序渐进向前学习 为什么要学vue? 因为可以用更少的时间,干更多的活,开发网站速度快 什么是库和框架? 库就是封装的属性或方法例如jquery.js 框架就是拥有自己的规则和元素,比库强大的多例如vue.js Vue学习的方式 传统开发模式:基于html/css/js文件开发vue 工程化开发方式:在webpa
第一节：初识Vue
W1965561714的博客
11-15 737
Vue官网Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。详细请看官网：安装 — Vue.jsVue.js:开发版本Vue.min.js:生产版本 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
Python写的一个定时重跑获取数据库数据
09-21
本文给大家分享基于python写的一个定时重跑获取数据库数据的方法，非常不错，具有参考借鉴价值，需要的朋友参考下
python怎么跑数据_PYTHON定时重跑获取数据
weixin_39565777的博客
12-19 175
代码实现import psycopg2from time import sleepclass GetData(object):def __init__(self):self.conn=''self.host='127.0.0.1'self.port=5432self.user='enniu'self.passwd='postgres'self.db='test'self.cnum=5 #set...
python跑seo数据_python与seo，挖掘同行网站监控数据学习seo优化
weixin_39611510的博客
12-04 194
我们在做网站seo优化的时候，经常是一个人或一个团队埋头苦干，其实效果不一定好，而且所有的工作效果周期也会比较长。事实证明，你大可不必如此，有很多优秀的网站优秀的seoer，我们只需要取其精华，就可以取得不错的效果。那么就需要找出同行的网站做为参考，或者找出同行做得好的网站，也就是竞争对手的网站。竞争对手除了要学习还需要监控，市场注意他们的动态，他们的流量变化等风吹草动我们都需要了如指掌。关于找同...
【如何实现Python脚本定时自动跑数】
m0_59248070的博客
10-10 1719
本文通过Python连接orcle数据库进行数据提取，再通过电脑控制面板自动定时跑数。
使用python定时跑模型
最新发布
frighting_ing的博客
04-03 255
【代码】使用python定时跑模型。
初识Vue.html
07-29
初识Vue.html
初识 Vue.js 中的 *.Vue文件
11-27
什么是Vue.js？ vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过...
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
Vue.js是当前前端开发领域中非常流行的一个JavaScript框架，它主要用来构建用户界面，属于渐进式框架。渐进式框架的意思是，开发者可以将Vue作为应用的一部分，逐步地添加到现有的项目中，而无需一开始就将所有代码...
确实会玩！教你用Python玩转数据～
Python数据之道
08-29 280
向大家推荐一个南京大学的公开课——用Python玩转数据授课老师张莉博士是南京大学计算机科学与技术系副教授，主要研究领域为数据挖掘和自然语言处理。张老师上课走亲切风冷幽默路线，跟同学们相...
python 某位置写数据_用python跑一边脚本，把数据传到几台服务器的指定位置
weixin_39761647的博客
12-06 99
创业公司，但也逐渐积累了十多态服务器，有时候因为一点小疏忽，就导致了十多台服务器返工，刚开始会使用ssh一台一台登上去修改，或者scp、sftp一个一个上传，基本上只要发生一点错误，就会花去小半天时间，这不是最重要的，最重要的是，小半天时间都在做一件重复的事：ssh链接 -> 找到文件目录 -> 修改 (或者：scp上传 -> 查看效果 ......)时间久了，就再也不想这样干了...
我在跑数据……
sizheng0320的专栏
06-11 593
现在已经是凌晨3点多了，老妈刚才起夜时给我拿了一盒酸奶。 昨天（其实是前天了）也是太忙，没倒出空来写。先让我想想，9号那天干嘛了…… 哦，对了，9号是星期二，我又是早起赶班车去北区上课。下课后，就抓紧时间出试题，剩了点尾巴，到11点半了，于是吃午饭，再坐班车回学校。回到学校后先把第二天答辩的学生材料取来，外加12瓶农夫山泉。紧接着，小王把表格送来了，我就去人事处、房管科盖章，很顺利
python tk 持续请求接口获取数据_tk数据获得的问题！！
weixin_29749887的博客
01-13 405
该楼层疑似违规已被系统折叠隐藏此楼查看此楼#!c://python25//envpython#-*-coding:UTF8-*-fromTkinterimport*classMyFrame(Frame):def__init__(self,parent,title=None):Frame.__init__(self,parent,title)self.body(parent)self....
队列跑数据
天涯孤狼的博客
01-09 555
1. Redis 队列跑数据 $key_redis = 123; $redis_status = $key_redis.date("Ymd"); $status = Yii::$app->redis->get($redis_status); $redis_key = $key_redis; /** @将数据写入缓存 （lpush） */ if(!$status){ $job = Mu
python的一些规则
weixin_71898100的博客
06-13 1730
1、python是大小写敏感的语言2、python的第一行代码语句必须顶到最左边，不能有空格。多行首页对齐3、python代码就是处理各种对象，在python中所有的数据都是对象例：hello 是字符类型的对象，55是整数类型的对象对象类型：常用的数据类型有：整数：如 5小数(也叫浮点数）：如1.2 3.5字符串（str）：如：“你好”列表：如 [1,2,"你好"]元组：如（"你好”）字典：如：{1:'mike',2:'jack'}二、数学运算1、分为正负数整数 如：整数1就是1，整数-1就是-1 prin
跑数据脚本
weixin_33778544的博客
04-27 717
比如统计1千万条数据，每次个进程统计10万条 <?php for ($x=0,$y=100000;$y<=10000000;$x=$y,$y=$y+100000) { $pid=pcntl_fork(); if($pid==-1){ //进程创建失败 die('fork child proces...
Vue入门：MVVM模式与快速集成指南
前端开发Vue基础篇：Day01 - 初识Vue是一个入门级教程，介绍了JavaScript框架Vue的基本概念和使用方法。Vue，全称为“Vue.js”，是一个轻量级的渐进式前端开发框架，遵循Model-View-ViewModel (MVVM) 模式，设计目标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值