Vue指令

前端发展

1.前端三剑客-HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13):编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
-ES--->ECMA标准:规定语法
-JavaScript=ECMA+bom+dom:语法+如何操作浏览器对象+如何操作文档对象

2.Ajax的出现 -> 后台发送异步请求,Render+Ajax混合
-单用Ajax(加载数据,DOM渲染页面):前后端分离的雏形

3.Angular框架的出现(1个JS框架):出现了“前端工程化”的概念(前端也是1个工程、1个项目)

4.React、Vue框架:当下热门前端框架(Vue:国内比较常用,React:国外比较常用)

5.移动开发(Android+IOS)+Wed(Wed+微信小程序+支付宝小程序)+桌面开发(Windows桌面),都称为大前端

6.一套代码在各平台运行(大前端):谷歌Flutter(Dart语言:和Java很像),可以运行在IOS、Android、PC端

7.在Vue框架的基础性上开发的uni-app:一套编码,编到10个平台
'''
-Vue:2.x、3.x
-如果用3.x,可以不用js
ts:typescript
less

-主流:vue,react,uni-app
-ts:typescript
'''

Vue简介

1.Vue是一套用于构建用户界面的渐进式框架
'渐进式:可以只有一部分使用,也可以这个工程都使用它'

2.下载使用
2.1在浏览器中打开,在复制下来,保存到js文件中
-https://cdn.jsdelivr.net/npm/vue/dist/vue.js
-使用
<script src="js/vue.js"></script>

3.开发Vue需要一款编辑器
-vscode:微软开发,轻量级编辑器,免费使用
-vim:要装插件,但要装的插件很多很麻烦,也可以开发代码
-Jetbrains开发的编辑器:IDEA(java)、Pycharm、Goland、phpStrom、webstorm,都是收费的编辑器,而且非常吃内存(都是java开发)
-AndroidStadio:免费使用,是谷歌买了授权

4.M-V-VM思想
MTV:django
MVC后端框架一般基于这种架构
MVVM:基于前端开发的架构模式,是一种事件驱动编程方式
MVP:移动端

5.组件化开发、单页面开发
1.组件化开发:有自己独立的html、css、js,每一个组件的内容都可以被替换和复用
2.单页面开发(SPA):只有一个html页面,结合组件化开发来替换页面中的内容,页面的切换只是组件的替换,页面依旧只有一个
img

Vue使用

<!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>vue使用</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>
</body>
<script>
    // 引入vue后,会有vue的构造函数
    var vm = new Vue({
        // 页面中id为app的div被vue托管了,在div中可以写vue的语法、指令
        el: '#app',
        data: {
            name: 'barry',
            age: 18,
        },
    })
</script>
</html>

插值语法

1.被vue托管的标签中可以写 {{}},中括号中可以写:变量、js简单的表达式、函数

2.三目运算符相当于三元表达式
-var a = 10 > 9 ? '大于' : '小于'
  • 插值的使用
<!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>vue插值渲染变量</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好:{{hobby}}</p>
    <p>第1个爱好:{{hobby[1]}}</p>
    <p>wife:{{wife}}</p>
    <p>wife的名字:{{wife['name']}}</p>
    <p>wife的年龄:{{wife.age}}</p>
    <p>标签:{{a}}</p>
    <p>{{10 > 9 ? '大于' : '小于'}}</p>
    <p>{{age+1}}</p>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'barry',
            age: 18,
            hobby: ['刺客信条', '假面骑士','哈利波特'],
            wife: {name:'冲田总司', age: 26},
            a: '<a href="https://www.baibu.com">点我</a>'
        },
    })
</script>
</html>

文本指令

1.写在标签上,以 v-xx 开头的都是vue的指令

2.文本指令
2.1v-text:把变量渲染到标签中,如果之前有数据,覆盖掉
2.2v-html:如果是标签字符串,会把标签渲染到标签内
2.3v-show:控制标签的显示与隐藏,但是它是通过style的display控制的:style="display: none;"
2.4v-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">
    <h1>文本指令 v-text</h1>
    <p v-text="name">kevin</p>
    <h1>文本指令 v-html</h1>
    <span v-html="a"></span>
    <h1>文本指令 v-show</h1>
    <img v-show="b" src="https://img0.baidu.com/it/u=4230177129,3008333640&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500"
         alt="">
    <h1>文本指令 v-if</h1>
    <div v-if="b1">
        <a href="https://www.baibu.com">点我</a>
    </div>

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

事件指令

1.放在别的标签上的-->v-on:事件名='函数'--简写-->@事件名='函数'
-事件名可以写:click、dbclick、input标签:blur、input、change

2.es6对象写法
var name = 'barry'
var age = 18
var obj = {name, age}

  • 事件指令使用
<!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>
    <button v-on:click="handleShow">显示消失</button>
    <div v-if="show">
        <img src="https://img2.baidu.com/it/u=3350501151,3749696733&fm=253&fmt=auto&app=138&f=JPEG?w=856&h=500" alt="">
    </div>
    <h1>事件指令函数带参数</h1>
    <button @click="handleShow0">函数需要参数,但是没传</button>
    <button @click="handleShow1('barry')">函数需要参数,传了参数</button>
    <button @click="handleShow2('barry')">函数需要2参数,但是只传了1个</button>
    <button @click="handleShow3($event, 'barry')">函数需要2参数,一个是事件,一个是字符串</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
        },
        methods: {
            handleShow() {
                // this就是vm对象,!是取反的意思
                this.show = !this.show
            },
            // 函数需要参数,但是没传,默认把event事件传入
            handleShow0(a) {
                console.log(a)
            },
            // 函数需要参数,传了参数,但只能传数字、字符串、布尔值、变量
            handleShow1(a) {
                console.log(a)
            },
            // 函数需要2参数,但是只传了1个,不会报错,没有传值的参数是undefined
            handleShow2(a, b) {
                console.log(a)
                console.log(b)
            },
            // 函数需要2参数,一个是事件,一个是字符串
            handleShow3(a, b) {
                console.log(a)
                console.log(b)
            },
        },
    })
</script>
</html>

属性指令

1.写在标签上的name、class、href、src...属性
v-bind:属性名='变量'
-简写
:属性名='变量'
  • 属性指令使用
<!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>
    <button @click="handleClick">看好看的</button>
    <br>
    <img v-bind:src="url" alt="">
    <hr>
    <button @click="handleChange">点我可以换</button>
    <br>
    <img :src="url1" alt="">
    <br>
    <img :src="url2" alt="">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 设置默认图片
            url: 'https://img2.baidu.com/it/u=3350501151,3749696733&fm=253&fmt=auto&app=138&f=JPEG?w=856&h=500',
            url1: 'https://img2.baidu.com/it/u=3793230529,1388751277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=790',
            url2: 'https://img1.baidu.com/it/u=1366960436,3872329760&fm=253&fmt=auto&app=138&f=JPG?w=333&h=500',
            // 用于切换的图片
            imgList: ['https://img2.baidu.com/it/u=2807426562,2729556782&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=500',
                'https://img2.baidu.com/it/u=3392649738,919099101&fm=253&fmt=auto&app=138&f=JPEG?w=293&h=500',
                'https://img2.baidu.com/it/u=4086746759,3805558511&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=500',
                'https://img2.baidu.com/it/u=3711808891,422502660&fm=253&fmt=auto&app=138&f=JPG?w=708&h=500',
                'https://img2.baidu.com/it/u=1540773619,19016539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
            ]
        },
        methods: {
            // 点击修改图片
            handleClick() {
                this.url = 'https://img0.baidu.com/it/u=3600534983,4092696431&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=707'
            },
            handleChange() {
                // floor:只取整数部分
                // Math.random()可以生成0-1之间的数字
                // 这个小数乘以数组的长度在取整
                var i = Math.floor(Math.random() * this.imgList.length)
                //
                this.url1 = this.imgList[i]
            },
        },
        mounted(){
            // 页面加载完后开启定时器,每隔一秒执行函数,函数内部变量在变
            setInterval(()=>{
                var i = Math.floor(Math.random() * this.imgList.length)
                this.url2 = this.imgList[i]
            },1000)
        }
    })
</script>
</html>
posted @ 2022-10-24 22:12  无言以对啊  阅读(41)  评论(0)    收藏  举报