vue入门

最新推荐文章于 2024-10-11 21:24:54 发布

Bob drudgery

最新推荐文章于 2024-10-11 21:24:54 发布

阅读量180

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Bobdragery/article/details/93780907

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

铺垫知识

"""
1、BBS：前后台不分离的web项目
	前台页面主要是通过后台逻辑完成渲染
2、Django：Python Web 框架
	HttpResponse | ORM | 模板语言 | Forms | Auth
3、前端：HTML5 CSS3 JavaScript jQuery Bootstrap
	HTML5：页面架构
	CSS3：选择器 样式 布局
	JS：ES DOM BOM => 选择器拿到标签，操作标签，标签事件完成交互
	
DOM驱动 => Vue数据驱动
"""

Vue框架

# Angular React Vue

# js渐进式框架：一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目

# 思考：vue如何做到一次引入控制整个项目 => 单页面应用 => vue基于组件的开发
	# vue的工作原理：vue如何渲染一个页面
    # vue的组件概念
    # vue路由的概念
    # vue的ajax概念
# 学习曲线：vue的指令 vue的实例成员  vue组件  vue项目开发

Vue的优点

"""
1.单页面：高效
2.虚拟DOM：页面缓存
3.数据的双向绑定：数据是具有监听机制
4.数据驱动：从数据出发，不是从DOM出发 
"""

Vue的使用

"""
1.下载vue.js：https://vuejs.org/js/vue.js
2.在要使用vue的html页面通过script标签引入
3.在html中书写挂载点的页面结构，用id表示
4.在自定义的script标签实例化Vue对象，传入一个大字典
5.在字典中通过 el与挂载点页面结构绑定，data为其通过数据
"""

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue初识</title>
</head>
<body>
<div id="app">
    <!-- {{ vue变量 }} 插值表达式 -->
    <h1>{{ h1_msg }}</h1>
    <h2>{{ h2_msg }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',  // 挂载点
        data: {  // 为挂载点的页面结构提高数据
            h1_msg: 'h1的内容',
            h2_msg: 'h2的内容',
        }
    })
</script>
</html>

vue完成简单的事件

<div id="app">
    <h1 v-on:click="clickAction">h1的内容是{{ msg }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'vue渲染的内容'
        },
        methods: {  // 为挂载点提供事件的
            clickAction: function () {
                alert(123)
            }
        }
    })
</script>

vue操作简单样式

<div id="app">
    <p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
    <div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v_style: {
                color: 'black'
            }
        },
        methods: {
            btnClick: function () {
                this.v_style.color = 'green'
            }
        }
    })
</script>

小结

"""
1.vue通过 v-* 指令来控制标签
2.vue通过 变量 来驱动页面
"""

指令

文本指令

<div id="app">
    <!-- 插值表达式就是 v-text -->
    <p>{{ msg1 }}</p>
    <p v-text="msg2"></p>
    
    <!-- 可以解析html标签 -->
    <p v-html="msg3"></p>
    
    <!-- 必须赋初值，渲染的结果永远不会发生改变 -->
    <p v-once="msg3"  v-on:mouseover="action">{{ msg3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg1: '**msg1**',
            msg2: '<b>**msg2**</b>',
            msg3: '<b>**msg3**</b>',
        },
        methods: {
            action: function () {
                // var msg = this.$data.msg4;
                this.msg3 = '<i>**new msg3**</i>'
            }
        }
    })
</script>

事件指令

<div id="app">
    <!-- v-on:事件名="函数名"  可以简写为 @事件名="函数名"  （v-on: => @）-->
    <p v-on:click="action1">{{ msgs[0] }}</p>
    <p @click="action2">{{ msgs[1] }}</p>

    <!-- 事件的传参 -->
    <ul>
        <li @click="liAction(100)">列表项1</li>
        <li @click="liAction(200)">列表项2</li>
        <li @click="liAction(300)">列表项3</li>
    </ul>

    <!-- 鼠标事件的对象：直接写函数名，默认将鼠标事件对象传入 -->
    <div @click="func1">func1</div>
    <!-- 鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象 -->
    <div @click="func2($event, 'abc')">func2</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msgs: ['11111', '22222']
        },
        methods: {
            action1: function () {
                alert(this.msgs[0])
            },
            action2: function () {
                alert(this.msgs[1])
            },
            liAction: function (num, msg) {
                console.log(num, msg)
            },
            func1: function (ev) {
                console.log(ev)
            },
            func2: function (ev, msg) {
                console.log(ev);
                console.log(msg)
            }
        }
    })
</script>

属性指令

<div id="app">
    <!-- 属性指令：用vue绑定属性，将属性内容交给vue处理 -->
    <!-- 语法：v-bind:属性名="变量"  (v-bind: 可以简写为 :) -->
    <p class="" style="" v-bind:owen="oo" :jason="jj"></p>


    <!-- class 属性 -->
    <p :class="c1" @click="action1"></p>
    <!-- 多类名 -->
    <p :class="[c1, c2]"></p>
    <!-- 'br' 固定写死的数据，不再是变量 -->
    <p :class="[c1, 'br']"></p>

    <!-- style 属性 -->
    <!-- 一个变量：该变量值为{},{}内部完成一个个属性的设置 -->
    <p class="gDiv" :style="s1">12345</p>
    <!-- 一个{}：{}内一个个属性有一个个变量单独控制 -->
    <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            oo: 'Owen',
            jj: 'Jason',
            c1: 'rDiv',
            c2: 'br',
            s1: {
                // 'font-size': '30px'
                fontSize: '30px',
                color: 'pink'
            },
            fs: '20px',
            c: 'orange'
        },
        methods: {
            action1: function () {
                if (this.c1 == 'rDiv') {
                    this.c1 = 'gDiv'
                } else {
                    this.c1 = 'rDiv'
                }
            }
        }
    })
</script>

条件指令

<meta charset="UTF-8">
<style>
    .div {
        width: 100px;
        height: 100px;
        background-color: greenyellow;
        border-radius: 50%;
    }
</style>
<div id="app">
    <!-- 条件指令 v-show | v-if-->
    <!-- v-show：消失是以 display: none渲染 -->
    <div class="div" v-show="s1"></div>
    <div class="div" v-show="s1"></div>
    <!-- v-if：消失时不会被渲染，所以建议建立缓存, 用key属性 -->
    <div class="div" v-if="s2" key="div1"></div>
    <div class="div" v-if="s2" key="div2"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            s1: false,
            // s2: false  没写默认为false
        }
    })
</script>

<meta charset="utf-8">
<style>
    ul li {
        border: 1px solid black;
        width: 60px;
        float: left;
    }
    ul {
        list-style: none;
    }
    ul:after {
        content: "";
        display: block;
        clear: both;
    }
    .wrap {
        width: 500px;
        height: 200px;
    }
    .red { background-color: red; }
    .blue { background-color: blue; }
    .green { background-color: green; }
</style>
<div id="app">
    <!-- v-if v-else-if v-else 案例 -->
    <ul>
        <li @click="changeWrap(0)">red</li>
        <li @click="changeWrap(1)">green</li>
        <li @click="changeWrap(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="wrap red" v-if="tag == 0" key="aaa"></div>
    <!-- green页面逻辑结构 -->
    <div class="wrap green" v-else-if="tag == 1" key="bbb"></div>
    <!-- blue页面逻辑结构 -->
    <div class="wrap blue" v-else key="ccc"></div>
    <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
    <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			tag: 0,
		},
		methods: {
			changeWrap (num) {
				this.tag = num;
			}
		}
	})
</script>