首页 > 其他分享 >Vue

Vue

时间：2023-02-14 20:46:31浏览次数：53  
标签：Vue name show url 标签 app

目录

Vue

前端发展史

# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
	-ECMAScript 6 ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准
	 -ES13--->标准
     -js=ecma+bom+dom
     -sass，typescript。。。
# 2 Ajax(异步JavaScript和XML)的出现 -> 后台发送异步请求，Render+Ajax混合
	-$.ajax
    -XMLHttpRequest  原生ajax

# 3 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形

# 4 Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）

# 5 React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）

# 6 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端

# 7 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
	-前端用flutter后端用python写好不好

# 8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台

# 9 在不久的将来 ，前端框架可能会一统天下

vue介绍

Vue官网

Vue版本：Vue2.x 和Vue3.x，本内容基于Vue2知识讲解。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

M-V-VM 架构思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

# M-V-VM 架构思想               MVC    MTV   MVVC   MVP移动端架构
	-M：Model 数据层   vue对象的data属性里面的数据，这里的数据要显示到页面中
    -V：View  视图层   vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
    -VM：ViewModel     vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
    
# 作用：以后页面变，js变量就变，js变量变，页面就变

组件化开发、单页面开发

  • 组件化开发，以后都是写出一个个组件，组件的组合成页面
  • 单页面开发（单页面应用）：spa：single-page application，一个HTML页面

MVVM的特性

  • 低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变
  • 可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计
  • 可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写

版本

  1. 1.x版本---使用的较少

  2. 2.x版本---普遍使用较多

  3. 3.x 版本---出了很久，公司新项目会选择

    注：语法有差距，但是Vue3完全兼容Vue2，可以在Vue3上写Vue2，但是官方不建议了

Vue的特点

# 易用
     通过 HTML、CSS、JavaScript构建应用
# 灵活
     不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
# 高效
     20kB min+gzip 运行大小
     超快虚拟 DOM
     最省心的优化

js数组常用方法

https://blog.csdn.net/u012451819/article/details/125768796

Vue js的框架

引入Vue的两种方式

  1. 下载Vue2源码，下载到本地

    <script src="./js/vue.js"></script>

  2. 直接导入Vue的CND

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

实例

1. vue2源码，下载到本地----》js代码
2. html中引入，写vue语法
3.vue语法

<script>
        new Vue({
        el:'#app',
        data:{
            name:'lqz'
        }
    })  实例
</script>

xss攻击

dtl的选择器

插值语法

M-V-VM演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="static/vue.js"></script>
</head>
<body>
            <div id="app">
              <p>姓名：{{name}}</p>
              <p>age：{{age}}</p>

            </div>
</body>
        <script>
          var vm = new Vue({
            el:'#app',
            data:{ // data中定义的变量，以后直接从vm实例直接可以拿到
              name:'kiki',
              age:18
            }
          })
        </script>
</html>

插值语法

在Vue中，python的三元表达式成为三目运算符。插值语法中可以放变量【对象取值，数组取值】、简单的js语法、函数()

注意：插值不能写在标签的属性上，只能写在标签内部

插值语法：{{}}

插值语法对应的结果

js 插值语法的用法
变量名name {{name}}
数组hobby:['奶茶','水果','水果捞'] 索引取值：{{hobby[1]}}
对象:friend: 对象点：{{friend.name}}
链接：a_url:'百度' 插值语法是字符串

实例
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/vue.js"></script>
</head>
<body>
        <div id="app">
            <p>名字：{{name}}</p>
            <p>年龄：{{age}}</p>
            <p>年龄：{{hobby}}----->第一个爱好:{{hobby[1]}}</p>
            <p>朋友：{{friend}}----->朋友姓名:{{friend.name}}---朋友的年纪：{{friend.age}}</p>
            <p>标签(默认不会渲染成标签)：{{a_url}}</p>
            <p>函数()</p>

        </div>
</body>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'kimi',
                age:18,
                hobby:['奶茶','水果','水果捞'],
                friend:{name:'fifi',age:28}
              // 运算
              a_url:'<a href="http://www.baidu.com">百度</a>'

            }
        })
        console.log(vm)
    </script>
</html>

文本指令

v-xx 写在任意标签属性上，不用加{

指令 释义 举例
v-html 让HTML渲染成页面 <p v-html="a_url"></p>
v-text 标签内容显示js变量对应的值 <p v-text="a_url"></p><br/> 同 <p>{{a_url}}</p>
v-show 放1个布尔值：true->标签就显示；false->标签就不显示 style="display: none;"样式控制显示
v-if 放1个布尔值：true->标签就显示；false->整个标签之间删除，效率低，在dom中删除标签

注意：a_url必须是data中定义的变量

v-show与 v-if的区别

  • v-show：标签还在，只是不显示了（display: none）
  • v-if：直接操作DOM，删除/插入 标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="static/vue.js"></script>
</head>
<body>

    <div id="app">
        <h2>v-text</h2>
        <p v-text="a_url"></p>  <!-- 得到字符串-->

        <h2>v-html</h2>
        <p v-html="a_url"></p>  <!-- 得到百度链接-->

        <h2>v-show</h2>
        <img v-show="show" src="https://img0.baidu.com/it/u=1914588600,2165521099&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" height="150px" width="200px">

        <h2>v-if</h2>
        <div v-if="show_if">
            <img v-if="show_if" src="https://img2.baidu.com/it/u=2841588310,2443646494&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" height="150px" width="200px">
        </div>

    </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>

image

属性指令

标签上的属性可以绑定变量，以后变量变化属性的值也跟着变化

href
src
name
class
style
height
.......
  标签的属性绑的是date里面的变量名，变量名的变化就是标签属性值的变化

语法

v-bind:属性名="变量名" 可简写成 :属性名="变量名"

指令 释义
v-bind 直接写js的变量或语法（不推荐）
: 直接写js的变量或语法（推荐） 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="static/vue.js"></script>
</head>
<body>
    <h2>v-bind</h2>
    <div id="app" >
      <img  v-bind:src="phone" alt="" :height="h" :width="w">
    </div>

</body>
    <script>
          var vm = new Vue({
            el:'#app',
            data:{
                a_url:'<a href="http://www.baidu.com">百度</a>',
                phone:"https://img2.baidu.com/it/u=2841588310,2443646494&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
                h:"150px",
                w:"200px"
            }
          })
    </script>
</html>

事件指令

事件指令是指：点击事件/双击事件/滑动事件，最常用的是点击事件click

指令 释义 例子
v-on 触发事件（不推荐） v-on:click="handleClick"
@ 触发事件（推荐） @事件名='函数'
@[event] 触发event事件（可以是其他任意事件） 
v-on:事件名='函数'
    <button v-on:click="handleClick">图片展示</button>
    函数必须写在methods的配置项中
    methods:{
            'handleClick':function (){
                // alert('图片展示')
                console.log(this)  // this 就是当前vue实例，就是vm实例
                this.show=!this.show
            },  
        }
   
注意：点击button就会触发绑定函数（handleClick）的执行

实操

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="static/vue.js"></script>
</head>
<body>
<!--        <h2>点击事件&#45;&#45;点击按钮显示图片</h2>-->
<!--        <div id="box">-->
<!--            <img :src="url" alt="" :width="w" :height="h">-->
<!--            <button @click="handleClick">图片显示</button>-->
<!--        </div>-->

<!--        <h2>点击事件&#45;&#45;切换图片</h2>-->
<!--        <div id="box">-->
<!--            <img  :src="url" alt="" :width="w" :height="h">-->
<!--            <button @click="handleClick">切换图片</button>-->
<!--        </div>-->

        <h2>点击事件--定时器</h2>
        <div id="box">
            <img  :src="url" alt="" :width="w" :height="h">
            <button @click="handleClick">开始自动切换图片</button>
        </div>


</body>

    <script>
          var vm = new Vue({

            el:'#box',
            data:{
                a_url:'<a href="http://www.baidu.com">百度</a>',
                show:true,
                url:"https://img0.baidu.com/it/u=1914588600,2165521099&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
                url_list:[
                    "https://img1.baidu.com/it/u=3137839583,1268792578&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=300",
                    "https://img0.baidu.com/it/u=1914588600,2165521099&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
                    "https://img0.baidu.com/it/u=924177493,4128380787&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=480",
                    "https://img1.baidu.com/it/u=2366849520,302709710&fm=253&fmt=auto&app=138&f=JPEG?w=505&h=300",
                ],
                h:"150px",
                w:"200px"
            },

              //绑定点击按钮，控制show的显示
              // methods:{
              //   handleClick(){
              //       // alert("图片展示")
              //       console.log(this)
              //       this.show =! this.show  //取反操作
              //   }
              // }

              // 点击随机图片展示
              // methods:{
              //   'handleClick':function (){
              //       var i = Math.round(Math.random()*(this.url_list.length -1))
              //       this.url = this.url_list[i]
              //       console.log(i)
              //
              //   }
              // }

              //定时器切换图片
              //  methods:{
              //   'handleClick':function (){
              //       var _this = this
              //       setInterval(function (){
              //           var i = Math.round(Math.random()*(_this.url_list.length -1))
              //            _this.url = _this.url_list[i]
              //           console.log(i)
              //       },1000) // 1s更新一次
              //
              //
              //   }
              // }

              //简写
              methods:{
                handleClick(){
                console.log('hahh')
                  var _this = this
                  setInterval(function (){
                      var i = Math.round(Math.random()*(_this.url_list.length - 1))
                      _this.url = _this.url_list[i]
                      console.log(i)
                  },1000)
              }
              }
          })

案例---点击按钮，随机切换照片

	-1 methods配置项中写成 这种形式  es6的对象写法
     	handleClick() {}
        如果函数中再套函数，如何内部不是箭头函数，this指向有问题，需要在外部定义一下
        var _this = this

class和style

两者区别

# class：推荐用数组  
	:class='变量'   
    变量可以是字符串，数组，对象
    
    
# style：推荐用对象
	:style='变量'   
    变量可以是字符串，数组，对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/vue.js"></script>
  <style>
      .font {
            font-size: 20px;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }

        .font-color {
            color: yellow;
        }
  </style>
</head>
<body>
  <div id="app">
    <h2>class</h2>
    <div :class="class_list">我是class---div</div>

    <h2>style</h2>
    <div :style="style_obj">我是style---div</div>

  </div>

</body>

    <script>
        var vm = new Vue({
          el:'#app',
          data:{
            // class_str:'font',//字符串    前端修改vm.class_str='font red'
            class_list:['font'],  //推荐    前端修vm.class_list=['font','red']
            // class_obj:{font:true,green:true,'font-color':false},

            // style_str:'color:green;font-size:40px'
            // style_list:[{color:'yellow'},{'font-size':'40px'}]
            // style_list:[{color:'yellow'},{fontSize:'40px'}] // 可以用驼峰
            // style_obj:{color:'yellow',fontSize:'50px'} // 可以用驼峰
            style_obj:{color:'yellow','font-size':'50px'}

          }
        })
    </script>
</html>

条件渲染

指令 释义
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if 
# v-if=条件  放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else-if=条件  放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
# v-else     放在标签上，上面条件都不成立，显示这个标签

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

列表渲染

v-if+v-for+v-else控制购物车商品的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <script src="static/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="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>

            <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>

</body>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          show:false,
          good_list: [
                {id: 1, name: '钢笔', price: '29'},
                {id: 2, name: '铅笔', price: '29'},
                {id: 3, name: '文具盒', price: '298'},
                {id: 4, name: '彩笔', price: '298'},
            ]
        },
        methods:{
          handleClick(){
            this.show =! this.show
          }
        }
      })

    </script>
</html>

补充

  • 解释器ide: 集成开发环境，快速开发。
  • 解释器有pycharm,goland和vscode
  • django template language 的模板语法简称dtl

标签：Vue,name,show,url,标签,app
From： https://www.cnblogs.com/zhanglanhua/p/17120815.html

相关文章

  • 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中......
  • Vue中使用this.$router.resolve打开新页面
    方法一：resolve会返回一个跳转路由对象if(id&&orgCode){lettext=this.$router.resolve({path:path,query:{......
  • vue简介及基础语法
    vue简介及基础语法前端编程从最初的html、css、js散件编写页面，到后来ajax异步请求的出现，在不断发展，在Angular框架出现之后，出现了前端工程化的概念，而现在时下最主流的框架......
  • vuex页面刷新数据丢失
    一：数据丢失的原因vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时......
  • Vue实现字符串换行
    今天在做的时候需要用到字符串换行，在网上找了一下，换行是通过添加white-space:pre-wrap属性，通过\n进行换行在这里记录一下<stylelang="scss"scoped>::v-deep.el-tab......
  • vue2--day2
    昨日回顾#1put,post提交的json格式必须是标准json字符串格式#2字符串中不小心加了空格#4认证类，当前登录用户可以不去数据库查出来#5斜杠问题(中间件：django.mi......
  • vue
    今日内容1.插值语法2.文本指令3.属性指令4.事件指令5.class和style6.条件渲染7.列表渲染1.插值语法插值语法中可以放:变量，对象取值，数组取值,简单的js语法,函数()......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99