标签：vue 01 age 学习 Vue https var name

Vue入门

零：前端目前形式

前端的发展史

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

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

开发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学习-01

Vue入门

零：前端目前形式

前端的发展史

详细的发展史

一、Vue介绍和基本使用

开发vue，有一款编辑器

M-V-VM思想

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

组件化开发

单页面开发

引入方式

代码演示

三、插值语法

指令系统之文本指令

代码演示

指令系统之事件指令

代码演示

指令系统之属性指令

代码演示

相关文章

赞助商

阅读排行