首页 > 其他分享 >Vue学习-01

Vue学习-01

时间：2022-10-24 20:47:46浏览次数：80  
标签：vue 01 age 学习 Vue https var name

Vue入门

零：前端目前形式

前端的发展史

  1. HTML（5）、css（3）、JavaScript（ESS、ES6）：编写一个个的页面——给后端（PHP、Python、Go、Java）——后端嵌入模板语法——后端渲染完数据——返回数据给前端——在浏览器查看
  2. Ajax的出现——后台发送异步请求，  Render+Ajax混合
  3. 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
  4. Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
  5. React、Vue框架：当下最火的两个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
  6. 移动开发（Android+IOS）+Web（Web+微信小程序+支付宝小程序）+桌面开发（Windows桌面）：前端——大前端
  7. 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言，和java很像）可以运行在IOS、Android、PC端
  8. 在Vue框架的基础性上uni-app：一套编码 编到14个平台

详细的发展史

https://zhuanlan.zhihu.com/p/337276087?

utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904

一、Vue介绍和基本使用

官网：https://cn.vuejs.org/

  • Vue介绍

Vue（读音 /vjuː/，类似于 view） 是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用

Vue的核心库值关注视图层，（不仅易于上手，还便于与第三方库或既有项目结合）

  • 渐进式框架

可以一点一点地使用它，只用一部门，也可以整个工程使用它

  • Vue特点
  1. 通过HTM、CSS、JavaScript构建应用
  2. 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩
  3. 20KB min+gzip运行大小
  4. 超快虚拟DOM
  5. 最省心的优化

开发vue，有一款编辑器

  • vscode：微软 轻量级编辑器，免费
  • vim：装插件，可以开发代码
  • Jetbrains：IDEA（java）、Pycharm、Goland、phpStrom、webstrom  收费、比较费内存（java开发）
  • AndroidStadio：免费，谷歌买了Jetbrains授权+ADT
  • Sun：java——后来被甲骨文收购——oracle jdk    openjdk  毕昇jdk
  • Pycharm + 插件 开发vue 使用起来跟webstorm   把vue的源代码可以下载到本地

M-V-VM思想

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

  -MTV：django

  -MVC：后端框架一般基于这种架构

  -MVVM：前端框架  vue

  -MVP：移动端

二、组件化开发、单页面开发

组件化开发

类似于DTL中的include每一个组件的内容都可以被替换和复用

单页面开发

只需要1个页面，结合组件化开发来替换页面中的内容

页面的切换知识组件的替换，页面还是只有1个index.html

引入方式

  • CDN的方式引入 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 下载后导入

  在浏览器中打开：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

  然后赋值下来，创建一个js文件再粘贴进去

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

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue的快速使用</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>

</body>
<script>
    // 引入vue后，会有vue的构造函数，传入 配置项 对象
    // 页面中id为app的div被vue托管了，在div中就可以写vue的语法，指令
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'curry',
            age: '33',
        },
    })

</script>
</html>

三、插值语法

被vue托管的标签中可以写{{}} 中可以写：变量、js简单的表达式、函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue插值渲染变量</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好：{{hobby}}</p>
    <p>第0个爱好：{{hobby[0]}}</p>
    <p>wife：{{wife}}</p>
    <p>wife的名字：{{wife['name']}}</p>
    <p>wife的年龄：{{wife.age}}</p>
    <p>标签：{{a}}</p>
    <h1>vue插值渲染简单表达式</h1>
    <p>{{6 > 4? '大于' : '小于'}}</p>
    <p>{{age+1}}</p>

</div>

</body>
<script>
    // 引入vue后，会有vue的构造函数，传入 配置项 对象
    // 页面中id为app的div被vue托管了，在div中就可以写vue的语法，指令
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'curry',
            age: '34',
            hobby: ['篮球', '高尔夫'],
            wife: {name: 阿耶莎, age: 33},
            a: <a href="http://www.baidu.com">点这里</a>
        },
    })
    // 三目运算符——  三元表达式
    // var a =6 > 4 ? '大于' : '小于'
</script>
</html>

指令系统之文本指令

写在【任意】标签上，以 v-xx 开头的，都是vue的指令

文本指令

v-text 把变量渲染到标签中，如果之前有数据，则覆盖掉
v-html 如果是标签字符串，会把标签渲染到标签内
v-show 控制标签的显示与隐藏，但是它是通过style的display控制的： style=“display：none；”
v-if 控制标签的显示与隐藏，但是它是通过dom的增加和删除

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>文本指令</h1>
    <h1>文本指令 v-text</h1>
    <p v-text="name">小张</p>
    <h1>文本指令 v-html</h1>
    <span v-html="a"></span>
    <h1>v-show</h1>
    <img v-show='b' src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13441394032%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669202935&t=6e23cce087c6522ad151fbaf420b1e5f" alt="" width="300px"
         height="300px">
    <h1>v-if</h1>
    <div v-if="b1">
        <a href="">点我看美女</a>
        <h3>美女</h3>
    </div>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'curry',
            a: '<a href="http://www.baidu.com">点我</a>',
            b: true,
            b1: true
        },
    })

</script>
</html>

指令系统之事件指令

放在标签上：v-on：事件名=‘函数’

事件名可以写：click，dbclick，input标签：change，blur，input

补充：es6 对象写法

  var name = ‘curry’

  var age = 34

  // var obj = {name:name,age:age}

  var obj = {name,age,handleClick(){}}

v-on：事件名=‘函数’  简写成 @事件名=‘函数名’

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>事件指令</h1>
    <button v-on:click="handleShow">点我显示消失</button>
    <div v-if='show'>
        <img v-show='b'
             src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13441394032%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669202935&t=6e23cce087c6522ad151fbaf420b1e5f"
             alt="" width="300px"
             height="300px">
    </div>
    <h1>事件指令函数带参数</h1>
    <button @click="handleClick">函数需要参数，但是没传，默认会把event事件传入</button>
    <br>
    <button @click="handleClick1('curry')">函数需要参数，但是传值了</button>
    <br>
    <button @click="handleClick2('curry')">函数需要3参数，但是传了1个</button>
    <br>
    <button @click="handleClick3($event,'curry')">函数需要2参数，一个事件，一个字符串</button>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            show: true,
        },
    })
    methods: {
        // handleShow: function () {
        //     // this 就是vm对象 vm.show
        //     this.show = !this.show
        // },
        //es6的语法，对象写法,以后都这样写
        handleShow()
        {
            // this 就是vm对象 vm.show
            this.show = !this.show
        }
    ,
        // 需要一个参数，但是没有传，会把事件传入
        handleClick(a)
        {
            console.log(a)
            alert('帅哥')
        }
    ,
        // 需要1个，传了一个，但是需要传数字，字符串，布尔，或变量
        handleClick1(name)
        {
            console.log(name)
        }
    ,
        // 需要3个参数，传了一个，没问题，后面俩都是 undefined
        handleClick2(a, b, c)
        {
            console.log(a)
            console.log(b)
            console.log(c)

        }
    ,
        handleClick3(event, name)
        {
            console.log(event)
            console.log(name)

        }


    }
    })


    // es5中
    // var obj={'name':'lqz','age':19}
    // var obj={name:'lqz',age:19}
    // es6中
    var name = 'curry'
    var age = 19
    // var obj={name:name,age:age}
    var obj = {
        name, age, handleClick() {
        }
    }


</script>
</html>

指令系统之属性指令

写在标签上的 name、class、href、src、id......属性

v-bind：属性名=‘变量’

简写成：

v-bind：属性名=‘变量’：属性名=“变量名”

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">

    <h1>属性指令</h1>
    <button @click="handleClick">点我看美女</button>
    <br>
    <img v-bind:src="url" alt="" width="300px" height="300px">
    <hr>
    <button @click="handleChange">点我换美女</button>
    <br>
    <img :src="img_url" alt="" width="300px" height="300px">
    <hr>
    <img :src="img_url2" alt="" width="300px" height="300px">
    <hr>

    <div :id="id_div">
        我是div
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13441394032%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669202935&t=6e23cce087c6522ad151fbaf420b1e5f',
            img_url: 'https://p.qqan.com/up/2022-8/202283919254843.jpg',
            img_url2: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13441394032%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669202935&t=6e23cce087c6522ad151fbaf420b1e5f',
            imgList: ['https://img2.woyaogexing.com/2022/10/23/af963193e9fb67ee!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/22/95afdd5cd39d556d!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/21/f06c65142fe50c19!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/20/c0135f7e74050a74!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/20/5972f09505ac681d!400x400.jpg'],
            id_div:'xxx'
        },
        methods: {
            handleClick() {
                this.url = 'https://p.qqan.com/up/2022-8/202283919254843.jpg'

            },
            handleChange() {
                // floor:只取整数部分
                //Math.random() 生成0--1直接的数字，小数
                var i = Math.floor(Math.random() * this.imgList.length)
                console.log(i)
                this.img_url = this.imgList[i]
            }
        },
        mounted() {
            // 页面加载完，开启一个定时器，每隔3s干函数内容，函数里面在变化变量
            setInterval(() => {
                var i = Math.floor(Math.random() * this.imgList.length)
                this.img_url2 = this.imgList[i]
            }, 1000)
        }
    })


</script>

</html>

标签：vue,01,age,学习,Vue,https,var,name
From： https://www.cnblogs.com/zzjjpp/p/16821489.html

相关文章

  • vue 笔记12 vue-router路由2 导航守卫
              Vue被创建，挂载，更新时调用函数。      网页标题                    登录......
  • Python学习记录(六)：关键字
    打印Python语言的关键字，我们代码中的变量不能与内置的关键字相同>>>importkeyword>>>print(keyword.kwlist)['False','None','True','__peg_parser__','and','a......
  • 2022-2023-1 20221318 《计算机基础和程序设计》第九周学习总结
    作业信息这个作业属于那个班级https://edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业要求https://www.cnblogs.com/rocedu/p/9577842.html#WEEK09作业目标学习......
  • WebRTC源码学习02---webrtc源码编译安装（Mac）
    参考文献https://webrtc.org.cn/mirror/ （主要参考文章）https://www.an.rustfisher.com/webrtc/intro/sync-build/（参考一下代理设置）https://blog.csdn.net/dangwei_90/ar......
  • 【2022-10-24】前端Vue框架(一)
    前端发展介绍1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端-......
  • Vue学习（一）
    Vue学习（一）笔记记录学习B站狂神说Vuehttps://www.bilibili.com/video/BV18E411a7mC?p=1&vd_source=6800c7920d132926607a6fa073817ebb1、MVVM1.1、什么是MVVMMVVM（Mo......
  • 【转】VUE 组件注册使用示例
    首先是main.jsimport{createApp}from'vue'importAppfrom'./App.vue'import'./index.css'importSwiperfrom'./components/01.globalReg/Swiper.vue'imp......
  • 安装、更新、卸载vueCli
    一、全局安装vue-cli，在cmd中输入命令:npminstall--globalvue-cli；安装指定版本：npminstall-g@vue/[email protected]二、如果原来已经安装了vue-cli的话需要先卸载原来的安装......
  • Codeforces Round #401 (Div. 2) 题解 (待续)
    AShellGame#include<bits/stdc++.h>usingnamespacestd;#define#define#define#define#define#define#define#define#define#define#define#define#define#define#define......
  • April Fools Contest 2017 题解
    ANumbersJokeJoke数列，OEIS#include<bits/stdc++.h>usingnamespacestd;#define#define#define#define#define#define#define#define#define#define#define#define#define......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99