vue.js学习(二)

最新推荐文章于 2022-05-17 19:06:05 发布
最新推荐文章于 2022-05-17 19:06:05 发布
阅读量96 收藏
点赞数
分类专栏： # Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rj2017211811/article/details/97424663
版权

1.条件语句

v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js条件语句</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-if="seen" v-html="message"></h2>
        <template v-if="seen">
            <p v-html="message1"></p>
            <p v-html="message2"></p>
        </template>

    </div>
    <div id="app1">
        <h2 v-html="message"></h2>
        <div v-if="type==A">
            <p v-html="A"></p>
        </div>
        <div v-else-if="type==B">
            <p v-html="B"></p>
        </div>
        <div v-else-if="type==C">
            <p v-html="C"></p>
        </div>
        <div v-else>
            <p v-html="other"></p>
        </div>
    </div>
    <div id="app2">
        <h2 v-show="seen" v-html="message"></h2>
    </div>
    <script type="text/javascript">
        var vm1=new Vue({
          el:"#app",
          data:{
            message:"v-if",
            message1:"Hello",
            message2:"Hi",
            seen:true,
          }
        })
    </script>
    <script>
        var vm2=new Vue({
          el:"#app1",
          data:{
            message:"v-else v-else-if",
            type:'DDD',
            A:'A',
            B:'B',
            C:'C',
            other:"其他",
          }
        })
    </script>
    <script type="text/javascript">
        var vm3=new Vue({
          el:"#app2",
          data:{
            message:"v-show",
            seen:true,
          }
        })
    </script>



</body>
</html>

2.循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app1">
        <h1 v-html="message"></h1>
        <h2 v-html="message1"></h2>
        <ol v-for="site in sites">
            <li>{{site.name}}</li>
        </ol>
    </div>
    <div id="app2">
        <h2 v-html="message"></h2>
        <ul>
            <template v-for="site in sites">
                <li>{{site.name}}</li>
            </template>
        </ul>

    </div>
    <div id="app3">
        <h2 v-html="message"></h2>
        <ul >
            <li v-for="(value,key,index) in object">{{index}}.{{key}}:{{value}}</li>
        </ul>
    </div>
    <div id="app4">
        <h2 v-html="message"></h2>
        <ul>
            <li v-for="n in m">{{n}}</li>
        </ul>
    </div>
    <div id="app5">
        <h2 v-html="message"></h2>
        <ul v-for="user in users">
            <li v-for="(value,key,index) in user">{{index}},{{key}}:{{value}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm1=new Vue({
          el:"#app1",
          data:{
            message:"循环语句",
            message1:"v-for",
            sites:[
              {'name':'Runoob.com'},
              {'name':'baidu.com'},
              {'name':'tengxun.com'},

            ]

          }
        })
    </script>
    <script type="text/javascript">
        var vm2=new Vue({
          el:"#app2",
          data:{
            message:"在模板中使用v-for",
            sites:[
              {'name':'Runoob.com'},
              {'name':'baidu.com'},
              {'name':'tengxun.com'},

            ]
          }
        })
    </script>
    <script type="text/javascript">
        var vm3=new Vue({
          el:"#app3",
          data:{
            message:"迭代对象",
            object:{
              name:"张三",
              age:14,
              sex:'男',
            }
          }
        })
    </script>
    <script type="text/javascript">
        var vm4=new Vue({
          el:"#app4",
          data:{
            message:"迭代整数",
            m:10,
          }
        })
    </script>
    <script type="text/javascript">
        var vm5=new Vue({
          el:"#app5",
          data:{
            message:"迭代对象数组",
            users:[
              { name:"张三",
                age:14,
                sex:'男'},
              { name:"李四",
                age:13,
                sex:'男'},
              { name:"宋莉",
                age:13,
                sex:'女'},

            ]
          }
        })
    </script>

</body>
</html>

3.计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app1">
        <h1 v-html="message"></h1>
        <h2 v-html="message1"></h2>
        {{message2.split('').reverse().join('')}}
    </div>
    <div id="app2">
        <h2 v-html="message"></h2>
        <p v-html="message1"></p>
        <p v-html="reverseStr"></p>
        <p v-html="reverseStr2()"></p>

    </div>

    <div id="app4">
        <h2 v-html="message"></h2>
        <p v-html="counter"></p>
        <button @click="counter++" v-html="message2"></button>

    </div>
    <div id="app5">
        <h2 v-html="message"></h2>
        <label v-html="km"></label><input v-model="kilometers" >
        <label v-html="m"></label><input v-model="meters" >
        <p id="info"></p>
        <p id="info1"></p>
    </div>
    <div id="app3">
        <h2 v-html="message"></h2>
    </div>

    <script type="text/javascript">
        var vm1=new Vue({
          el:"#app1",
          data:{
            message:"Vue.js 计算属性",
            message1:"反转字符串-1",
            message2:"Baidu"
          }
        })
    </script>
    <script type="text/javascript">
        var vm2=new Vue({
          el:"#app2",
          data:{
            message:"computed",
            message1:"baidu",


          },
          computed:{
            reverseStr:function () {
              return this.message1.split('').reverse().join('')
            }
          },
          methods:{
            reverseStr2:function () {
              return this.message1.split('').reverse().join('')
            }
          }

        })
    </script>
    <script type="text/javascript">
        var vm3=new Vue({
          el:"#app3",
          data:{
            message:"computed setter",
            name:"Google",
            url:"https://google.com",

          },
          computed:{
            site:{
              get:function () {
                return this.name+' '+this.url;
              },
              set:function (value) {
                var names=value.split(' ')
                this.name=names[0]
                this.url=names[names.length-1]
              }
            }

          }
        })

         vm3.site="facebook http://www.facebook.com/";
        document.write(vm3.name+"<br/>")
        document.write(vm3.url)
    </script>
    <script type="text/javascript">
        var vm4=new Vue({
          el:"#app4",
          data:{
            message:"监听",
            counter:1,
            message2:"点我",
          }
        })
        vm4.$watch('counter',function (nval,oval) {
          alert('计数器的值从'+oval+'变成了'+nval)
        })
    </script>
    <script type="text/javascript">
        var vm5=new Vue({
          el:"#app5",
          data:{
            kilometers : 0,
            meters:0,
            km:'km',
            m:'m',
            message:'千米和米的换算'
          },
          watch:{
            kilometers:  function (val) {
              this.kilometers=val
              this.meters=this.kilometers*1000

            },
            meters:function (val) {
              this.kilometers=val/1000
              this.meters=val

            }
          }

        })
        vm5.$watch('kilometers',function (newValue,oldValue) {
          document.getElementById('info').innerHTML= "修改前值为: " + oldValue+ "km，修改后值为: " + newValue+'km';

        })
        vm5.$watch('meters',function (newValue,oldValue) {
          document.getElementById('info1').innerHTML= "修改前值为: " + oldValue+ "m，修改后值为: " + newValue+'m';

        })
    </script>

</body>
</html>

4.样式绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js样式绑定</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style type="text/css">
    .active{
        width:100px;
        height: 100px;
        background-color: aqua;
    }
    .base{
        width: 100px;
        height: 100px;
    }
    .active1{
        background-color: black;
    }
    .text-danger{
        background-color: red;
    }


</style>
<body>
    <div id="app1">
        <div v-bind:class="{active:isActive,'text-danger':isDanger}"></div>
        <button  @click="isActive=false">隐藏绿色</button>
        <button  @click="isActive=true">显示绿色<</button>
        <button  @click="isDanger=false">隐藏红色</button>
        <button  @click="isDanger=true">显示红色</button>
    </div>
    <div id="app2">
        <div v-bind:class="classObject"></div>
    </div>
    <div id="app3">
        <div v-bind:class="object"></div>
    </div>
    <div id="app4">
        <div v-bind:class="[activeClass,errorClass]"></div>
    </div>
    <div id="app5">
        <div v-bind:class="[errorClass,isActive?activeClass:'']"></div>
    </div>
    <div id="app6">
        <p v-bind:style="{fontSize:fontSize+'px',color:color1}" v-html="message"></p>
    </div>
    <div id="app7">
        <p v-bind:style="object" v-html="message"></p>
    </div>
    <div id="app8">
        <p v-bind:style="[style1,style2]" v-html="message"></p>
    </div>
    <script type="text/javascript">
        var vm1=new Vue({
          el:"#app1",
          data:{
            isActive:true,
            isDanger:true,
          }
        })



    </script>
    <script type="text/javascript">
        var vm2=new Vue({
          el:"#app2",
          data:{
            classObject:{
              'active':true,
              'text-danger':true,
            },

          }
        })
    </script>
    <script type="text/javascript">
        var vm3=new Vue({
          el:"#app3",
          data:{
            isTrue:true,
            isActive:true,
            error:{
              value:false,
              type:"fatal"
            }
          },
          computed:{
            object:function () {
              return {
                base:this.isTrue,
                active1:this.isActive&&!this.error.value,
                'text-danger':this.error.value&&this.error.type==='fatal'

              }

            }
          }
        })
    </script>
    <script type="text/javascript">
        var vm4=new Vue({
          el:"#app4",
          data:{
            activeClass:'active',
            errorClass:'text-danger',

          }
        })
    </script>
    <script type="text/javascript">
        var vm5=new Vue({
          el:"#app5",
          data:{
            isActive:true,
            activeClass:'active',
            errorClass:'text-danger',
          }
        })
    </script>
    <script type="text/javascript">
        var vm6=new Vue({
          el:"#app6",
          data:{
            message:'Hello,Vue',
            color1:'green',
            fontSize:10,
          }
        })
    </script>
    <script type="text/javascript">
        var vm7=new Vue({
          el:"#app7",
          data:{
            message:'Hello,Vue.js',
            object:{
              color:'yellow',
              fontSize:'40px',
            }
          }
        })
    </script>
    <script type="text/javascript">
        var vm8=new Vue({
          el:"#app8",
          data:{
            message:'Hello,Vue',
            style1:{
              color:'orange',
              fontSize:'100px',
            },
            style2:{
              backgroundColor:'blue',
            }
          }
        })
    </script>

</body>
</html>

5.事件处理器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js事件处理器</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app1">
        <h2 v-html="message"></h2>
        <button v-on:click="counter++" v-html="message2"></button>
        <p >这个按钮被点击了{{counter}}次</p>
    </div>
    <div id="app2">
        <h2 v-html="message"></h2>
        <button v-on:click="greet" v-html="message1"></button>
    </div>
    <div id="app3">
        <h3 v-html="message"></h3>
        <button v-on:click="say('Hello')" v-html="message1"></button>
        <button v-on:click="say('Hi')" v-html="message2"></button>
    </div>
    <script type="text/javascript">
        var vm1=new Vue({
          el:"#app1",
          data:{
            message:"v-on指令",
            message2:"增加1",
            counter:0,
          }
        })
    </script>
    <script type="text/javascript">
        var vm2=new Vue({
          el:"#app2",
          data:{
            message:"v-on 可以接收一个定义的方法来调用",
            message1:"Greet",
            name:"Vue.js",

          },
          methods:{
            greet:function (event) {
              if(event){
                alert('Hello'+this.name+'!')
                alert(event.target.tagName)

              }

            }
          }
        })
    </script>
    <script type="text/javascript">
        var vm3=new Vue({
          el:"#app3",
          data:{
            message:"绑定方法，内联javascript语句",
            message1:"sayHello",
            message2:"sayHi"
          },
          methods: {
            say:function (message) {
              alert(message)

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

6.表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app1">
        <h2 v-html="message1"></h2>
        <input v-model="message2">
        <p v-html="message2"></p>
        <h2 v-html="message4"></h2>
        <textarea v-model="message3"></textarea>
        <p v-html="message3"></p>
    </div>
    <div id="app2">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox"  v-html="checked"></label><br>
        <input type="checkbox" id="google" value="google" v-model="checkedNames">
        <label for="google" v-html="google"></label>


        <input type="checkbox" id="taobao" value="taobao" v-model="checkedNames">
        <label for="taobao" v-html="taobao"></label>

        <input type="checkbox" id="tengxun" value="tengxun" v-model="checkedNames">
        <label for="tengxun" v-html="tengxun"></label><br/>
        <span>您选择的值为{{checkedNames}}</span>

    </div>
    <div id="app3">
        <input type="radio" value="baidu" v-model="picked" id="baidu">
        <label for="baidu" v-html="baidu"></label>
        <input type="radio" value="souhu" v-model="picked" id="souhu">
        <label for="souhu" v-html="souhu"></label><br/>
        <span >您选择的值为{{picked}}</span>

    </div>
    <div id="app4">
        <select name="website" v-model="selected">
            <option value="">选择一个网站</option>

            <option value="https://baidu.com">百度</option>
            <option value="https://google.com">谷歌</option>
        </select>
        <p>您选择的网站是{{selected}}</p>
    </div>
    <script type="text/javascript">
        var vm1=new Vue({
          el:"#app1",
          data:{
            message1:"输入框",
            message4:"文本域",
            message2:"输入信息",
            message3:"文本域信息",
          }
        })
    </script>
    <script type="text/javascript">
        var vm2=new Vue({
          el:"#app2",
          data:{
            checked:false,
            google:"google",
            taobao:"taobao",
            tengxun:"tengxun",

            checkedNames:[],

          }
        })
    </script>
    <script type="text/javascript">
        var vm3=new Vue({
          el:"#app3",
          data:{
            baidu:"baidu",
            souhu:"souhu",
            picked:this.baidu,

          }
        })
    </script>
    <script type="text/javascript">
        var vm4=new Vue({
          el:"#app4",
          data:{
            selected:'',

          }
        })
    </script>


</body>
</html>
I like study.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js 学习笔记（二）
u012846041的专栏
11-29 234
一、环境搭建及初始化vue cli 项目 1安装和搭建npm 参见教程：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000 最好使用阿里提供的npm 镜像 cnpm 进行开发环...
vue.js（一）
anran_1211的博客
07-27 221
vue 响应数据绑定（不兼容ie8），当数据发生改变时，会自动更新视图 利用 Object.definedProperty 中的setter / getter 代理数据，监控对数据的操作 MVVM ：  M ： model  数据模型      V：view  视图模板     VM：view-model 视图模型 案例： // v-model 实现数据双向绑定 {{ name
VUE02
qq_44888661的博客
04-23 110
事件修饰符 事件修饰符可以串联的 .stop：阻止冒泡，在事件后加入.stop。(在div中嵌套一个按钮，按钮和div也加入点击事件，当点击按钮以后，默认先触发按钮点击事件然后在触发div的点击事件，防止div的点击事件发生，就采用阻止冒泡，阻止冒泡是停止所有的冒泡)。 .prevent：阻止默认事件,在事件后加入.prevent。(给a标签一个点击事件，只想触发事件里的内容，不想跳转链接,就采用...
vue入门
zy2303201381的博客
04-25 1080
目录 1. Vue.js是什么？ 2. 库和框架的区别 3. MVVM的介绍 4. 安装Vue 5.示例演示 6.实例生命周期钩子(了解即可) 1. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 易用 html css javascript 高效 开发前端页面 非常高效 灵活 开发灵活 多样性 官网：Vue.js Vue作者：尤雨溪/中国无锡...
mongodb 中的模糊查询----(like 查询语句) 在mongo VUE里面怎么写查询
请叫我大师兄
07-13 4万+
模糊查询：就是sql的select * from table where xx like yy的样式的sql语句。 db.user.find({"name":/ab/}) 这样，可以查出所有包含有"ab"字符串的数据了。 等同于select * from user where name like "ab" 说的再多，不如给图来的实在。 图1：特殊一点点，like语句里面是带括
vue.min-2.x.js
08-18
vue.js
Vue前端的封装的高级搜索条件，like,=,or,and,not null,in,not in,between..and后端进行统一的接收
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
05-17 2893
文章目录1.点击高级搜索按钮出现弹框2.出现弹框的页面，通过js封装好相关的下拉条的条件2.1 弹框代码2.2 细节 在高级搜索弹框页面点击新增 需要控制高级搜索的首个条例不可以编辑 ,新增按钮方法3.条件代码4.高级搜索的保存代码后端代码接收1. controller1.1它的封装的搜索的类1.2封装的排序的类2. serviceimpl 实现层3.mapper层4.xml文件前端的全部代码注意后端的接收高级搜索的条件 1.点击高级搜索按钮出现弹框 <!-- 操作按钮 -->
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.js 下载，引入vue.js 本地开发
05-18
以上就是Vue.js的基本介绍和引入方式，结合标签中的"javascript"和"ecmascript"，Vue.js是基于ECMAScript（特别是ES5和部分ES6特性）构建的，因此理解JavaScript基础和现代JavaScript特性对于深入学习Vue.js至关重要...
Vue.js学习工程.zip
12-21
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Vue.js的学习工程通常包含多个组成部分，用于帮助初学者或者开发者深入理解和实践Vue.js的各种特性。在这个"Vue.js学习...
Vue.js前端开发 PDF
05-30
Vue.js的设计理念是简洁、易用且高效，它旨在通过最小的学习曲线提供强大的功能，使得开发者能够快速构建交互式的用户界面。Vue.js的PDF文档通常会涵盖以下几个主要的知识点： 1. **基础概念**：Vue.js的基础包括...
vue重要知识点
qq_40994735的博客
09-27 5591
1 基础部分 1.1 v-if与v-show的区别 v-if隐藏式隐藏节点，v-show隐藏式css display：none 频繁切换显示与隐藏建议使用v-show，次数少建议使用v-if 1.2 watch与computed的区别 watch监听数据变化，computed从现有的数据计算新的数据 watch没有缓存，而computed有缓存 watc不能异步，而computed可以异步 watch是一对多的关系，而computed是多对一关系 1.3 watch的深度监听 handler 还有
vue
like_jack的博客
10-26 341
站位
Vue实现视频播放
热门推荐
rj2017211811的博客
10-10 4万+
1.使用html的video标签(适合pc端，支持Ogg、MPEG4、WebM格式) （1）安装video.js插件 cnpm install --save video.js （2）在main.js中导入video.js import Video from 'video.js' import 'video.js/dist/video-js.css' (3)使用 <template>...
Vue实现简单音乐播放
rj2017211811的博客
10-09 1万+
<template> <div> <aplayer autoplay :music="songs2[0]"> </aplayer> <audio :src="currentSrc" autoplay="" controls="" @ended="nextSong"> </audio> ...
Vue+NodeJs前后端分离实现
rj2017211811的博客
11-17 1万+
1.创建Vue项目 使用vue-cli脚手架工具创建Vue项目 vue init webpack myapp 创建完成后 cd myapp 安装一些依赖 cnpm install --save axios cnpm install --save stylus cnpm install --save vue-loader cnpm install --save css-loader ...
VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
rj2017211811的博客
09-11 8561
在axios里使用this.xxxx(xxxx为data里面定义的)报错 TypeError: Cannot set property 'xxxx' of undefined 主要原因是： 在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。 可以看下 Stackoverflow 的解释： 解决办法： 1、用ES6箭头函数，箭头方法可以和父方法共享变量 2、在...
vue简单实现轮播图
rj2017211811的博客
02-16 3945
一 准备数据 (1)定义一个dataList，里面存放我们的图片 dataList:['../../static/images/300.jpg','../../static/images/301.jpg'] (2)currentIndex：来表示当时当前图片的索引 currentIndex:0 二、显示一张图片 <div class="banner"> <div c...
vue.js学习计划表
最新发布
03-22
1. 学习前端基础知识：在开始学习Vue.js之前，建议先掌握HTML、CSS和JavaScript的基础知识，包括DOM操作、事件处理等。 2. 了解Vue.js的基本概念：学习Vue.js之前，先了解Vue.js的核心概念，如组件、指令、响应式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值