Vue-(1)-CSDN博客

本文链接：https://blog.csdn.net/AL_QX/article/details/127492804

内容概览

前端发展介绍
MVVM与组件化开发
Vue的快速使用
插值语法
指令系统之文本指令
指令系统之事件指令
指令系统之属性指令

前端发展介绍

1. HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
    # ECMA标准
    # JavaScript=ECMA+bom+dom
2. Ajax的出现 -> 后台发送异步请求，Render+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端
8. 在Vue框架的基础性上 uni-app：一套编码 编到10个平台

主流：vue，react ，uni-app
	typescript:包含了JavaScript并对扩展了对变量类型的规定
	less:包含了css并做了扩展

MVVM与组件化开发

"""
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架(可以在部分使用它,也可以整个项目都使用它)。
"""
"""开发vue的编辑器"""
1. vscode：微软 轻量级编辑器，免费
2. vim：装插件，搞得花里胡哨，开发代码
3. Jetbrains:IDEA(java)，Pycharm，Goland，phpStrom，webstorm   收费 吃内存(java开发)
4. AndroidStadio：免费，谷歌买了Jetbrains授权+ADT
	sun：java---》后来被甲骨文收购了--->oracle jdk   openjdk  毕昇jdk
        
Pycharm + 插件  开发vue 使用起来跟webstorm差不多
	把vue的源代码下载到本地或使用cdn
		开发环境版本，包含了有帮助的命令行警告
			https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
		生产环境版本，优化了尺寸和速度
			https://cdn.jsdelivr.net/npm/vue@2

"""M-V-VM思想"""
MVVM(Model-view-viewmodel):前端框架 vue 
MTV :django
MVC :后端框架一般基于这种架构
MVP：移动端

"""组件化开发、单页面开发"""
组件化开发:页面中的一块区域有自己独立的html、css、js,可以直接将多个组装起来使用
单页面应用(SPA):只有一个html页面

Vue的快速使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="d1">
    <h1>vue快速使用</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>

</body>
<script>
	// 引入vue后，会有Vue的构造函数,传入 配置项 对象
    // 页面中id为d1的div就被vue托管了，在div中就可以写vue的语法，指令
    var vm = new Vue({
        el: '#d1',
        data: {
            name: '小明',
            age: 18,
        }
    })
</script>
</html>
<!--现在数据和 DOM 已经被建立了关联，所有东西都是响应式的;可以通过浏览器的JavaScript控制台修改 d1.name 的值,页面上的数据也会同步更新-->

插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="d1">
    <h1>vue快速使用</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好:{{hobby}}</p>
    <p>第3个爱好:{{hobby[2]}}</p>
    <p>wife:{{wife}}</p>
    <p>wife的名字:{{wife['name']}}</p>
    <p>wife的年龄:{{wife.age}}</p>
    <p>标签:{{a}}</p>
    <h1>vue插值渲染简单表达式</h1>
    <p>{{10 > 9 ? '大于' : '小于'}}</p>
    <!--三目运算符————python中的三元表达式：'大于' if 10 > 9 else '小于'-->
    <p>{{age+1}}</p>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            name: '小明',
            age: 18,
            hobby:['c','t','r','l'],
            wife:{name:'小红', age:22},
            a:'<a href="http://www.baidu.com">点我</a>'  // 不会转换为a标签
        }
    })
</script>
</html>

指令系统之文本指令

写在任意标签上，以v-xxx开头的，都是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="./js/vue.js"></script>

</head>
<body>
<div id="d1">
    <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="vs" src="https://img0.baidu.com/it/u=1727590956,2341015234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=369"
         alt="">
    <h1>v-if</h1>
    <img v-if="vi" src="https://img1.baidu.com/it/u=2774948329,4157779396&fm=253&fmt=auto&app=138&f=JPG?w=1180&h=358"
         alt="">
</div>

</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            name: '小明',
            a: '<a href="http://www.baidu.com">点我</a>',
            vs: true,
            vi: false
        }
    })
</script>
</html>

指令系统之事件指令

放在标签上：v-on:事件名='函数'
事件名可以写：click,dbclick, input标签:change,blur,input
补充：es6 对象写法
    var name = 'lqz'
    var age = 19
    var obj={name:name,age:age, handleClick:function(){}}
    var obj = {name, age, handleClick() {}}  # 简写
    
v-on:事件名='函数'  简写成  @事件名='函数'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="d1">
    <h1>事件指令</h1>
    <button v-on:click="handleShow">btn</button>  <!--可以简写为 @click="handleShow"-->
    <br>
    <img v-show="vs" src="https://img0.baidu.com/it/u=1727590956,2341015234&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=369"
         alt="">
    <hr>
    <h1>事件指令函数携带参数</h1>
    <button @click="handleClick1">函数需要参数但是没传,默认会把event事件传入第一个参数,多余的参数为undefined</button>
    <br>
    <button @click="handleClick2(123, 'abc', vs)">函数需要参数且传入了参数,参数需要是数字,字符串,布尔值,变量</button>
    <br>
    <button @click="handleClick3($event, 'abc')">函数需要两个参数,一个事件,一个字符串</button>


</div>

</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            vs:true,
        },
        methods:{
            handleShow:function (){this.vs = !this.vs},  // this代表vm对象,this.vs=vm.vs
            // 上边代码在es6中可以简写为:handleShow(){this.vs = !this.vs}
            handleClick1(a,b,c){
                console.log(a)
                console.log(b)
                console.log(c)
            },
            handleClick2(a,b,c){
                console.log(a)
                console.log(b)
                console.log(c)
            },
            handleClick3(a,b){
                console.log(a)
                console.log(b)
            }
        }
    })
</script>
</html>

指令系统之属性指令

写在标签上的id、class、name等属性
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="d1">
    <h1>属性指令</h1>
    <button @click="handleClick">查看图片</button>
    <br>
    <img :src="url" alt="">
    <hr>
    <button @click="handleChange">切换图片</button>
    <br>
    <img :src="url1" alt="">
    <hr>
    <img :src="url2" alt="">

</div>

</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            url: 'https://img0.baidu.com/it/u=3864291308,939897230&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=550',
            url1: 'https://img0.baidu.com/it/u=3864291308,939897230&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=550',
            url2: 'https://img0.baidu.com/it/u=3864291308,939897230&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=550',
            urlList: ['https://img2.baidu.com/it/u=2572989638,2230022051&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
                'https://img2.baidu.com/it/u=3764088126,316976367&fm=253&fmt=auto&app=138&f=JPEG?w=1180&h=430',
                'https://img1.baidu.com/it/u=4250080464,1051503416&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500',
                'https://img2.baidu.com/it/u=107149946,675401149&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=234',
                'https://img2.baidu.com/it/u=1811815088,3518163412&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=500']
        },
        methods: {
            handleClick() {
                this.url = 'https://img1.baidu.com/it/u=2774948329,4157779396&fm=253&fmt=auto&app=138&f=JPG?w=1180&h=358'
            },
            handleChange() {
                // floor:只取整数部分
                //Math.random() 生成0--1直接的数字，小数
                var i = Math.floor(Math.random() * this.urlList.length)  // 生成的小数乘以数组中的个数,再地板取整
                this.url1 = this.urlList[i]
            },
        },
        mounted() {
            // 页面加载完，开启一个定时器，每隔1s执行函数内容，函数里面在变化变量
            setInterval(() => {
                var i = Math.floor(Math.random() * this.urlList.length)
                this.url2 = this.urlList[i]
            }, 1000)

        }
    })
</script>
</html>