Vue入门介绍及简单使用_模板语法_指令-v-xxx_样式控制-style和class

最新推荐文章于 2023-08-23 12:58:15 发布

I believe I can fly~

最新推荐文章于 2023-08-23 12:58:15 发布

阅读量214

点赞数

分类专栏： html js 文章标签： vue

本文链接：https://blog.csdn.net/qq_31455841/article/details/111180303

版权

html 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

Vue 入门

在这里插入图片描述

1. 前端目前形式

# 前端发展阶段
1. html5,css3,js(es5,es6)
	写一个一个的页面
    	=> 给后端（php，python，go，java）
        	 => 后端嵌入模板语法
            	 => 后端渲染完
                	 => 返回给前端
                    	 => 在浏览器中看
                        
2. ajax出现 
	=> 后台发异步请求，render+ajax混合

3. 单用ajax（加载数据，dom渲染页面）
	=> 前后端分离的雏形
    
4. agular
	=> js框架，前端工程化，前端也是一个工程，一个项目
    
5. react，vue
	=> 当下最火的两个前端框架（vue国人，react外国）
    
6. 移动开发（安卓，ios）+web（web，微信小程序，支付宝小程序）+桌面开发（windows桌面）
	=> 前端 => 大前端
    
7. 一套代码在各个平台运行（前端）
	=> 谷歌flutter（Dart：跟java很像）: ios，安卓，桌面
        
8. 在vue框架的基础上 
	=> nui-app ：https://uniapp.dcloud.io/  (一套代码编到10个平台，这不是梦想)
        
9. 在不久的将来，或许谷歌flutter一统天下

10. 内卷化

2. vue介绍及使用

1. 渐进式JavaScript

# 渐进式JavaScript
	javascript的框架（jq），写简单的可以使用vue，写复杂的项目也可以使用

# 渐进式概念
	通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

2. vue介绍

# vue介绍	
    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
    
# 与其它大型框架不同之处
    Vue 被设计为可以自底向上逐层应用
    Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
    
# 版本
	1.x   2.x（用的最多）  3.x（beta版本）

3. vue特点

1. 易用
	通过 HTML、CSS、JavaScript构建应用

2. 灵活
	不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩

3. 高效
    20kB min+gzip 运行大小
    超快虚拟 DOM
    最省心的优化

4. 三大主流框架

# 三大主流框架
	1. Angular 
    2. React 
    3. Vue

# 先进的前端设计模式
	MVVM可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发 单页面开发
    
# MVVM
	Model-View-ViewModel
        model      数据（后端给的，js接收到）
        ViewModel  中转（双向数据绑定：js中变量变了，html中数据也跟着变）
        view       视图（html+css）

5. 快速使用

# 下载(可以使用cdn)
    1. 开发版本
        vue.js :https://vuejs.org/js/vue.js

    2. 生产版本
        vue.min.js :https://vuejs.org/js/vue.min.js
            
# 示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>

<body>
<div id="box">
    {{name}}
</div>
</body>

<script>
    new Vue({
        el:'#box',
        data:{
            name:'lqz'
        }
    })
</script>
</html>	

# 补充
	1. 解释型语言，需要解释器
       js解释器集成到浏览器中了，console就等同于在cmd敲python3的交互式命令行是一样的
        
    2. nodejs
       把chrome的v8引擎（解释器）安装到操作系统之上

3. 模板语法-插值

# 插值
1. 插值语法   
	{{ js变量或js语法}} 

# 注意
	直接把Vue对象赋值给变量，修改变量值，可以直接修改页面内容
    # 示例    
        vm.$data.name
        vm.name
        
# 示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <p>{{name}}</p>
    <p>{{age}}</p>
    <p>{{ll}}</p>
    <p>{{obj}}</p>
    {{10+20+90}}
    {{10<20?'是':'否'}}
	<p v-html="s"></p>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            name: 'hello world',
            age: 19,
            ll: [1, 2, 3],
            obj: {name: 'lqz', age: 19},
            s: '<a href="http://www.baidu.com">点我看美女</a>',
        },
    })
</script>
</html>

4. 指令

1. 文本相关指令

# 文本相关指令
	v-html  v-text  v-show  v-if

1. 标签属性为 v-xx 的形式，是vue的指令

2. 常用指令
	v-html:
        让html渲染成页面
    v-text:
        标签内容显示js变量对应的值
    v-show:
        放一个布尔值，为真，标签就显示，为假标签就不显示
    v-if:  
        放一个布尔值，为真，标签就显示，为假标签就不显示
    
3. v-show 和 v-if 区别
	v-show 标签还在，不显示
    v-if   操作的dom把标签删除和加入

4. 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <p v-html="s"></p>
    <h1>v-text</h1>
    <span v-text="name">我是span标签</span>
    <span>{{name}}</span>
    <hr>
    <h1>v-show</h1>
    <div v-show="isShow">我是div</div>
    <h1>小案例，控件通过按钮控制显示和消失</h1>
    <button @click="handleClick()">点我</button>
    <div v-show="isShow">我是div</div>
    <h1>v-if</h1>
    <div v-if="isShow">我是divdivdiv</div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            name: 'hello world',
            age: 19,
            ll: [1, 2, 3],
            obj: {name: 'lqz', age: 19},
            s: '<a href="http://www.baidu.com">点我看美女</a>',
            isShow: true
        },
        methods: {
            handleClick() {
                //this指的是当前vue对象
                this.isShow = !this.isShow
            },
        }
    })

</script>
</html>

2. 事件指令

1. 点击事件
	给标签（控件）绑定函数，点击执行函数
    
2. v-on:click 可缩写成 @click
    
3. 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
</head>

<body>
<div id="box">
    <button v-on:click="handleClick">v-on:点我</button>
    <!--用的多-->
    <button @click="handleClick2">@click点我2</button>
    <!--如果不传参数，没有大的区别-->
    <button @click="handleClick2()">点我3带括号</button>
    <!--如果要传参数-->
    <button @click="handleClick3(100)">点我4带参数</button>
    <!--传入事件-->
    <button @click="handleClick5($event)">点我5带事件参数</button>
</div>
</body>

<script>
    new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            
        },
        methods: {
            handleClick(){
                console.log('1111')
            },
            handleClick2(){
                console.log('22222')
            },
            handleClick3(a,b){
                console.log(a)
                console.log(b)
            },
            handleClick5(ev){
                console.log(ev)
            }
        }
    })
</script>
</html>

3. 属性指令

1. 给标签属性的value值绑定成js的变量

2. v-bind:class='js变量'  可缩写成  :class='js变量'
        
3. 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background: red;
        }

        .green {
            background: green;
        }
    </style>
    <title>Title</title>
</head>

<body>
<!--有个按钮，有个div，点击按钮，div变色-->
<div id="box">
    <!--<img v-bind:src="url" alt="">-->
    <!--<img :src="url" alt="" width="60" height="60">-->
    <!--<div :class="red_class">我的个divdiv快乐的div</div>-->

    <button @click="handleClick">点我变色</button>
	<!--<div :class="change">-->
    <div :class="isActive?'red':'green'">
        我是一个div
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607928733686&di=7c30817eab8f708731b778398be273e3&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190403%2F6c4dcd970b4b4131bd0929f9e025b1ba.jpeg',
            // red_class: 'red',
            change:'red',
            isActive:true,
        },
        methods: {
            handleClick() {
                // this.change='green'
                this.isActive=!this.isActive
            }
        }
    })
</script>
</html>

5. style和class

# v-bind指令
	v-bind控制sytle和class的显示
    
# 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background: red;
        }

        .green {
            background: green;
        }

        .font {
            font-size: 30px;
        }

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
<!--    <div :class="class_obj" >-->
<!--        我是div控件-->
<!--    </div>-->

    <button @click="handleClick">点击，字体变大</button>
    <div  :style="style_obj">
        我是div控件
    </div>
</div>
</body>

<script>
    var vm=new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            // class_obj: 'red', //放一个是字符串
            
            // class_obj: ['red'],  //放多个是数组
            //数组.push()  从尾部加一个元素
            //数组.pop()   从尾部弹出一个元素
            //数组的其它操作自行搜索

            //对象写法
            style_obj:{
                background:'yellow',
                fontSize:'30px'
            }
        },
        methods:{
            handleClick(){
                console.log('asdfasd')
                this.style_obj['fontSize']='30px'
            },
        }
    })

</script>
</html>

I believe I can fly~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue入门介绍及简单使用_模板语法_指令-v-xxx_样式控制-style和class

Vue 入门1. 前端目前形式# 前端发展阶段1. html5,css3,js(es5,es6) 写一个一个的页面 => 给后端（php，python，go，java） => 后端嵌入模板语法 => 后端渲染完 => 返回给前端 => 在浏览器中看 2. ajax出现 =>
复制链接

扫一扫