码迷，mamicode.com
首页 > 其他好文 > 详细

Vue学习【第一篇】：Vue初识与指令

时间：2019-02-14 20:53:41      阅读：161      评论：0      收藏：0      [点我收藏+]

标签：表达   监听   使用   项目   mic   方式   this   alt   http   

什么是Vue

什么是Vue
Vue.js是一个渐进式JavaScript框架
它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）
渐进式：vue从小到控制页面中的一个变量到页面一块内容到整个页面，最终大到整个项目，东可以用vue框架来实现

vue可以干哪些事
将数据渲染到指定区域（数据可以是后台获取，也可以由前台自己产生）
可以与页面完成基于数据的交互方式

为什么学习Vue
1.整合了Angular React框架的优点（第一手API文档是中文的）
2.单页面应用（得益于vue的组件化开发 => 前台代码的复用）
3.虚拟DOM（提高操作DOM的效应）
4.数据的双向绑定

怎么使用Vue

1、引入vue.js

技术图片

2、展示HTML

<div id="app">
    <p>{{msg}}</p>
    <p>{{ 80+2 }}</p>
    <p>{{ 20>30 }}</p>
    <h1 v-text="msg"></h1>
    <h1 v-html="hd"></h1>
    <h1 v-html="str"></h1>
</div>

3、建立一个vue对象

vue对象需要手动创建， 原因，一个vue对象可以只控制页面中的某一部分， 如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象
vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)

<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // Vue实例会根据数据产生虚拟DOM,最终替换掉挂载点的真实DOM(不要挂在到body上)
    var app = new Vue({
        el: ‘#app‘,     //挂载点
        data: {
            msg: "赢在今日"
        }
    });

    // 如果需要使用vue对象(实例), 那么久可以接受Vue创建的结果, 反之就不需要接收
    console.log(app);
    console.log(app.$attrs); // vue实例的变量都是以$开头
    console.log(app.$el);
    console.log(app.$data.msg);
    console.log(app.msg);
    // app对象 = new Vue()实例 = 标签div#app组件
</script>

Vue实例

el：实例

new Vue({
    el: ‘#app‘
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

data：数据

<div id=‘app‘>
    {{ msg }}
</div>
<script>
    var app = new Vue({
    	el: ‘#app‘,
    	data: {
    		msg: ‘数据‘,
    	}
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插值表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->　

methods：方法

<style>
    .box { background-color: orange }
</style>
<div id=‘app‘>
    <p class="box" v-on:click="pClick">测试</p>
	<p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
    	el: ‘#app‘,
    	methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
    	}
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

computed：计算

<div id="app">
 	<input type="text" v-model="a">
    <input type="text" v-model="b">
    <div>
        {{ c }}
    </div>
</div>

<script>
	// 一个变量依赖于多个变量
    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
        },
        computed: {
            c: function() {
                // this代表该vue实例
                return this.a + this.b;
            }
        }
    })
</script>　

watch：监听

<div id="app">
 	<input type="text" v-model="ab">
    <div>
        {{ a }}
        {{ b }}
    </div>
</div>

<script>
	// 多个变量依赖于一个变量
    new Vue({
        el: "#app",
        data: {
            ab: "",
            a: "",
            b: "",
        },
        watch: {
            ab: function() {
                // 逻辑根据需求而定
                this.a = this.ab[0];
                this.b = this.ab[1];
            }
        }
    })
</script>

delimiters：分隔符

<div id=‘app‘>
    ${msg}
</div>
<script>
    new Vue({
    	el: ‘#app‘,
    	data: {
    		msg: ‘message‘
    	},
        delimiters: [‘${‘,‘}‘]
    })
</script>

生命周期钩子

表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数

钩子函数: 满足特点条件被回调的方法

new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("实例刚刚创建");
        console.log(this.msg);
    },
    created () {
        console.log("实例创建成功, data, methods已拥有");
        console.log(this.msg);
    },
    mounted () {
        console.log("页面已被vue实例渲染, data, methods已更新");
    }
    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})

Vue的指令

指令：是带有v-前缀的特殊属性，通过属性来操作元素

文本相关指令

<div id="app">
    <!-- 插值表达式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本会被msg替换 -->
    <p v-text=‘msg‘>原文本</p>
    <!-- 可以解析带html标签的文本信息 -->
    <p v-html=‘msg‘></p>
    <!-- v-once控制的标签只能被赋值一次 -->
    <p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
	// 指令: 出现在html标签中可以被vue解析处理的全局属性
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		}
	})
</script>

斗篷指令

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		}
	})
</script>
<!-- 避免页面闪烁-->　

属性指令

<!-- 给自定义全局属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="‘abc‘"></p>

<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>

<!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{width: ‘100px‘, height: ‘100px‘, backgroundColor: ‘blue‘}"></div>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data: {
            abc: "abc",
            c1: "p1",
            c2: "p2",
            c3: "p3",
			div_style: {
				width: "200px",
				height: "200px",
				backgroundColor: "cyan"
			}
		}
	})
</script>
<!-- v-bind: 指令可以简写为 : -->　

事件指令

<!-- v-on: 指令 简写 @ -->
<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>

表单指令

<div id="app">
    <!-- v-model针对于表单元素 -->
    <form action="" method="get">
        <!-- 1、双向绑定：服务于文本输入框 -->
        <!-- v-model存储的值为输入框的value值 -->
        <div>
            <input type="text" name="usr" v-model="in_val">
            <input type="password" name="ps" v-model="in_val" >
            <textarea name="info" v-model="in_val"></textarea>
        </div>

        <!-- 2、单选框 -->
        <div>
            <!-- 单选框是以name进行分组，同组中只能发生单选 -->
            <!-- v-model存储的值为单选框的value值 -->
            男：<input type="radio" name="sex" value="男" v-model="ra_val">
            女：<input type="radio" name="sex" value="女" v-model="ra_val">
            {{ ra_val }}
        </div>

        <!-- 3、单一复选框 -->
        <!-- v-model存储的值为true|false -->
        <!-- 或者为自定义替换的值 -->
        <div>
            <input type="checkbox" v-model=‘sin_val‘ true-value="选中" false-value="未选中" />
            {{ sin_val }}
        </div>

        <!-- 4、多复选框 -->
        <!-- v-model存储的值为存储值多复选框value的数组 -->
        <div>
            <input type="checkbox" value="喜好男的" name="cless" v-model=‘more_val‘ />
            <input type="checkbox" value="喜好女的" name="cless" v-model=‘more_val‘ />
            <input type="checkbox" value="不挑" name="cless" v-model=‘more_val‘ />
            {{ more_val }}
        </div>
    </form>
</div>

<script type="text/javascript">
	new Vue({
		el: ‘#app‘,
		data: {
			in_val: ‘‘,
			// 默认值可以决定单选框默认选项
			ra_val: ‘男‘,
			// 默认值为true，单一复选框为选中，反之false为不选中
			sin_val: ‘‘,
			// 数组中存在的值对应的复选框默认为选中状态
			more_val: [‘喜好女的‘,‘不挑‘]
		}
	})
</script>

条件指令

<div id="app">
    <button @click="toggle">显隐切换</button>
    <!-- v-if -->
    <div class="box r" v-if="isShow"></div>
    <!-- v-show -->
    <div class="box o" v-show="isShow"></div>
    <!-- 1.条件渲染的值为true|false -->
    <!-- 2.true代表标签显示方式渲染 -->
    <!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->

    <!-- v-if v-else-if v-else 案例 -->
    <ul>
        <li @mouseover="changeWrap(0)">red</li>
        <li @mouseover="changeWrap(1)">green</li>
        <li @mouseover="changeWrap(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="wrap red" v-if="tag == 0" key="0">...</div>
    <!-- green页面逻辑结构 -->
    <div class="wrap green" v-else-if="tag == 1" key="1">...</div>
    <!-- blue页面逻辑结构 -->
    <div class="wrap blue" v-else key="2">...</div>
    <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
    <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->

    <!-- v-show 案例 -->
    <ul>
        <li @mouseover="changeMain(0)">red</li>
        <li @mouseover="changeMain(1)">green</li>
        <li @mouseover="changeMain(2)">blue</li>
    </ul>
    <!-- red页面逻辑结构 -->
    <div class="main red" v-show="whoShow(0)">...</div>
    <!-- green页面逻辑结构 -->
    <div class="main green" v-show="whoShow(1)">...</div>
    <!-- blue页面逻辑结构 -->
    <div class="main blue" v-show="whoShow(2)">...</div>
</div>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			isShow: false,
			tag: 0,
			flag: 0
		},
		methods: {
			toggle () {
				this.isShow = !this.isShow;
			},
			changeWrap (num) {
				this.tag = num;
			},
			changeMain (num) {
				// this.flag num
				this.flag = num;
			},
			whoShow (num) {
				// this.flag num
				return this.flag == num;
			}
		}
	})
</script>

循环指令

<div id="app">
    <h1>{{ msg }}</h1>
    <!-- v-for="item in items" -->
    <!-- 遍历的对象: 数组[] 对象(字典){} -->
    <ul>
        <li>{{ list[0] }}</li>
        <li>{{ list[1] }}</li>
        <li>{{ list[2] }}</li>
        <li>{{ list[3] }}</li>
        <li>{{ list[4] }}</li>
    </ul>

    <!-- n为遍历的元素值 -->
    <ul>
        <li v-for="n in list">{{ n }}</li>
    </ul>

    <!-- 一般列表渲染需要建立缓存 -->
    <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
    <!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
    <ul>
        <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
    </ul>

    <ul>
        <li>{{ dic[‘name‘] }}</li>
        <li>{{ dic.age }}</li>
        <li>{{ dic.gender }}</li>
    </ul>

    <!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
    <ul>
        <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
    </ul>


    <!-- 遍历的嵌套 -->
    <div v-for="(person, index) in persons" :key="index" style="height: 21px;">
        <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}   </div>
    </div>
</div>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "列表渲染",
			list: [1, 2, 3, 4, 5],
			dic: {
				name: ‘zero‘,
				age: 88888,
				gender: ‘god‘
			},
			persons: [
				{name: "zero", age: 8},
				{name: "egon", age: 78},
				{name: "liuXX", age: 77},
				{name: "yXX", age: 38}
			]
		}
	})
</script>

todolist案例

<div id="app">
    <div>
        <input type="text" v-model="val">
        <button type="button" @click="submitMsg">提交</button>
    </div>
    <ul>
        <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
    </ul>
    {{ list }}
</div>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			val: "",
			list: []
		},
		methods: {
			submitMsg () {
				if (this.val) {
					this.list.push(this.val);
					this.val = ""
				}
			},
			removeMsg(index) {
				this.list.splice(index, 1)
			}
		}
	})
</script>

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-focus>
</div>
<script>
       new Vue({
            el:"#app",
            data:{

            },
           directives:{ //directives定义指令的
                focus:{   //focus指令的名字
                    inserted:function (els) {    //els绑定的这个元素
                        //inserted当绑定的这个元素  <input type="text" v-focus>显示的时候，
                        els.focus();  //获取焦点的一个方法，和以前的时候是一样的
                        els.style.backgroundColor="blue";
                        els.style.color=‘#fff‘
                    }
                }
           }
        })
    </script>
</body>
</html>

实现tag切换的小示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid cornflowerblue;
            height: 50px;
            width: 200px;
            background: cornflowerblue;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>

<body>
<div id="mybox">
    <ul>
        <li><span v-on:click="qh(true)">二维码登录</span></li>
        <li><span v-on:click="qh(false)">邮箱登录</span></li>
    </ul>
    <div v-if="temp">
        <img src="erweima.png" >
    </div>
    <div v-if="!temp">  <!--取反-->
        <form action="http://mail.163.com" method="post">
            <!--method是为了安全   ，action：提交的地址-->
            <p>邮箱：<input type="email"></p>
            <p>密码：<input type="password"></p>
            <p><input type="submit" value="登录"></p>
        </form>
    </div>
</div>
<script>
    new Vue({
        el:"#mybox",  //表示当前这个元素开始使用vue
        data:{
            temp:true
        },
        methods:{
            qh:function (t) {
                this.temp=t
            }
        }
    })
</script>
</body>
</html>

　　

Vue学习【第一篇】：Vue初识与指令

标签：表达   监听   使用   项目   mic   方式   this   alt   http   

原文地址：https://www.cnblogs.com/596014054-yangdongsheng/p/10228430.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！