首页 > 其他分享 >vue框架2

vue框架2

时间：2023-02-14 21:46:57浏览次数：41  
标签：style vue name 框架 show color 标签 font

插值语法

mvvm演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
   姓名：{{name}}
  <br>
  <input type="text" v-model="name">
</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      name: 'hanser',
      age:22
    }
  })
</script>
</html>

插值语法

# 插值语法中可以放的有：
  - 变量，对象取值，数组取值
  - 简单的js语法
  - 函数()
# 插值只能写在标签内部，不能写在标签属性上 
<!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>姓名:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好:{{hobby[1]}}</p>
    <p>妻子:{{wife}}</p>
    <p>妻子年龄:{{wife.age}}</p>
    <!--<p>运算:{{20+2*4}}</p>-->
    <p>三目运算符:{{20>21?'大于':'小于'}}</p>
    <p>标签:{{a_url}}</p>

</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
        name: 'hanser',
        age:22,
        hobby:['唱跳','rap','篮球'],
        wife:{name:'刘亦菲',age:38},
        a_url:'<a href={"http://www.baidu.com"}>百度</a>',
        // 三目运算符
    }
  })
</script>
</html>

文本指令

# 指令系统：vue提供的
   -v-xx           写在标签上，任意标签
   -v-xx=""        插值语法中可以写的，它都能写
# 例：a_url必须是data中定义的变量
       <p v-text="a_url"></p>
# v-text      <!--直接把字符串内容渲染在标签内部，等同于-->
       <p v-text="a_url"></p>
# v-html      <!--把字符串的内容渲染成标签，写在标签内部-->
       <p v-html="a_url"></p>
# v-show      <!--控制样式显示与否，等于布尔值，代表该元素是否显示-->
       <p v-show></p>  
# v-show_if   <!--在DOM中删除整个标签，等于布尔值，代表该元素是否被删除-->
 
# 代码示例： 
<!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 v-text="a_url"></p>
    <p v-html="a_url"></p>
    <p v-show></p>   <!--控制样式显示与否，等于布尔值，代表该元素是否显示-->
    <img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt=""
         v-show="show" width="200px" height="200px">
    <p>v-if</p>
    <img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt=""
         v-show_if="show" width="200px" height="200px">
</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
        a_url:'<a href="http://www.baidu.com">百度</a>',
        show:true,
        show_if:true
    }
  })
</script>
</html>

属性指令

# 标签上的属性可以绑定变量，属性值会随着变量变化
  例如：有src，href，class等

# 语法：
   v-bind:属性名="变量名"

# 简写：
   :属性名="变量名"

事件指令

# 事件指令
   - 点击事件(使用最多的)
   - 双击事件
   - 滑动事件

# 点击事件  
   1. v-on:事件名='函数'--->简写--->@事件名='函数'

 
        <button v-on:click="handleClick"></button>
   2. 函数必须写在methods的配置项中
        methods:{
            'handleClick':function (){
                console.log(this) 
                this.show=!this.show
        }}
   3. 上面的this是当前vue的实例
   4. 点击button就会触发绑定函数(handleClick)的执行
        
# 代码示例：写一个点击按钮，随机切换，美女图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">点击看美女</button>
    <div>
        <img :src="url" alt="" width="600px" height="600px">
    </div>
</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
        url:'https://pic1.zhimg.com/v2-cd7bc16e977b162d9092899ad106db73_r.jpg',
        url_list:['https://n.sinaimg.cn/sinakd20201010s/292/w640h1252/20201010/ccf8-kakmcxc4806009.jpg',
            'https://n.sinaimg.cn/sinacn20118/214/w2048h1366/20190111/3f99-hrpcmqv4220798.jpg',
            'https://pic4.zhimg.com/v2-0b676d3c16993f59466eca32858b4454_r.jpg',
            'https://t1.huanqiucdn.cn/7ef5e4ba546f17923ff99f22a46ad0b2.jpg',
            'https://pic2.zhimg.com/v2-cfabe13dfca655355e93068d3ce2fcbe_r.jpg'
        ],
    },
    methods:{
        handleClick() {
            var _this = this
            setInterval(function () {
                console.log(_this)
                var i = Math.round(Math.random() * (_this.url_list.length - 1))
                _this.url = _this.url_list[i]
                console.log(i)
            },1000)
            }
    }
  })
</script>
</html>

class和style

# 两者都是属性指令，应用广泛

# class：推荐用数组  
    :class='变量'       
    
# style：推荐用对象
    :style='变量'   
变量可以是字符串，数组，对象
# 数组的方发...移除pop(自行百度)

# 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .font {
            font-size:60px;
        }
        .red {
            background-color: red;

        }
        .green {
            background-color: green;
        }
        font-color{
            color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>class</h1>
    <!--    <div :class="class_str">div</div>-->
    <!--    <div :class="class_list">div</div>-->
    <div :class="class_obj">div</div>
    <h2>style</h2>
    <!--    <div :style="style_str">style</div>-->
    <!--    <div :style="style_list">style</div>-->
    <div :style="style_obj">style</div>
</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
        // class_str:'font red font-color',
        // class_list:['font'],   // 推荐
        class_obj: {font: true, green: false}
        style_str: 'color: green;font-size:80px',
        // style_list: [{color:'yellow'}, {'font-size':'90px'}],
        style_list: [{color: 'yellow'}, {fontSize: '90px'}],  // 可以用驼峰
        style_obj: {color: 'yellow', fontSize: '80px'}
        // style_obj: {color: 'yellow', 'font-size': '80px'}

    },
  })

条件渲染

# v-if=成立 放在标签上
     放在标签上，条件成立标签显示，否则不显示
# v-else-if=条件 
     放在标签上，条件成立标签显示，否则不显示
# v-else 
     放在标签上，上面条件都不成立，显示这个标签

# 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>通过分数显示文字</h1>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80&&score<90">良好</div>
    <div v-else-if="score>=60&&score<80">及格</div>
    <div v-else>不及格</div>
</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
        score:99
    },
  })

</script>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <h1>v-if+v-for 显示购物车</h1>
                    <button @click="handleClick">点击显示商品</button>
                    <div v-if="show">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>商品名</th>
                                    <th>商品价格</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in good_list">
                                    <th scope="row">{{item.id}}</th>
                                    <td>{{item.name}}</td>
                                    <td>{{item.price}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
        show:false,
        good_list: [
            {id:1,name:'宝马',price:'450000'},
            {id:2,name:'赛马',price:'1000000'},
            {id:3,name:'小马',price:'120000'},
            {id:4,name:'老马啊，老马',price:'4500'},
        ]
    },
      methods:{
        handleClick() {
            this.show=!this.show
        },
      }
  })

</script>
</html>

 

标签：style,vue,name,框架,show,color,标签,font
From： https://www.cnblogs.com/juzijunjun/p/17120972.html

相关文章

  • vue-day01——前端发展历史、vue的介绍及基本使用
    目录今日内容详细一、前端发展历史二、Vue的介绍与基本使用1.Vue简介2.Vue特点3.M-V-VM思想4.组件化开发、单页面开发5.版本选择6.引入方式7.简单使用8.补充今日内容详细......
  • VUE简介/插值/属性/文本/函数指令/if/for操作
    VUE简介/插值/属性/文本/函数指令前端发展史1.前后端一体的，HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板......
  • 前端之——vue day02 文本、事件、属性、条件渲染、列表渲染指令，class和style在vue中
    一、插值语法补充1.vue没有get，对象取值可以用句点，也可以【'K'】2.vue里数组取值，直接索引拿3.三目运算符​ 和Python三元有略微差别，Py的是结果一if条件else结果二......
  • Vue开发
    前端发展历史1、HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面发送给后端(PHP、Python、Go、Java)，后端嵌入模板语法进行渲染，渲染完数据后返回给前端方便在浏览......
  • 基于JAVA+SpringBoot+VUE的心理健康测试系统的设计与实现
    ✌全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战......
  • Vue
    目录Vue前端发展史vue介绍Vuejs的框架插值语法M-V-VM演示插值语法文本指令属性指令事件指令class和style条件渲染列表渲染补充Vue前端发展史#1HTML(5)、CSS(3)、Jav......
  • vue基础：插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染
    目录一·插值语法1.2插值语法二、文本指令三、属性指令四、事件指令五、class和style六、条件渲染七、列表渲染八、补充：一·插值语法1.1mvvm演示我们在vue语法中通......
  • Vue 插值语法与指令系统
    目录Vue插值语法与指令系统一、Vue的MVVM演示二、插值语法三、文本指令四、属性指令五、事件指令六、点击案例七、class和style八、条件渲染九、列表渲染Vue插值语法与......
  • vue基础语法
    1插值语法1.1mvvm演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></script></h......
  • 前端发展史 vue介绍 vue的快速使用
    上节回顾#1jwt源码分析-签发： 登录----》ObtainJSONWebToken--->post--->serializer.is_valid()--->走了校验---》正常登录逻辑可以拿到序列化类的validate中......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99