自学Vue的第02天

时间 2019-12-05

标签自学 vue 02天繁體版

原文原文链接

今日学习总结

一、HelloWorldjavascript

二、基本的vue指令html

HelloWorld

和全部的语言学习同样，咱们来一个HelloWorldvue

<!DOCTYPE html>
<html>
	<head>
	   <meta charset="UTF-8">
		<title>HelloWorld</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript"> new Vue({ el:"#app", template:` <div>Hello {{msg}}</div> `, data:function(){ return { msg:'Vue！' } } }) </script>
	</body>
</html>
复制代码

执行结果

代码分析

基本的使用Vue分为3个步骤

一、导入Vue.jsjava

二、在html中埋坑，这个坑是须要被Vue处理的npm

三、实例化一个Vue对象。这个Vue对2中的坑进行处理数组

el：我叫它选择器，就是指明当前这个Vue对象要处理的是页面中的那个坑位app

template

模板，其实写在这里的字符串效果和直接写到坑位中去是同样的函数

data

这里能够是一个对象，也能够是一个返回对象的函数。学习

对象数据用于渲染坑测试

插值表达式

{{表达式}}

经过插值表达式，这里提取出了data中定义的msg变量的值

注意

template中，只容许有一个根节点

v-text与v-html

示例代码

......
<div id="app">
    <div>
        <div v-text='mytext'></div>
        <div v-html='myhtml'></div>
    </div>
</div>
......
    new Vue({
        el: "#app",
        data() {
            return {
                mytext: '<h1>this is v-text</h1>',
                myhtml: '<h1>this is v-html</h1>',
            }
        }
    })
......
复制代码

执行结果

v-text
元素的innerText,不可解析html标签
v-html
元素的innerHtml 可解析html标签

v-if、v-else-if、v-else

作元素的插入（append）和移除（remove）操做

<div id="app"></div>
<script type="text/javascript"> new Vue({ el: "#app", template: ` <div> <button type="button" v-if='checkvif'>测试v-if</button> <button type="button" v-else-if='checkvelseif1'>测试v-else-if1</button> <button type="button" v-else-if='checkvelseif2'>测试v-else-if2</button> <button type="button" v-else>测试v-else</button> </div> `, data: function () { return { checkvif: true , checkvelseif1: true , checkvelseif2: true } } }) </script>
复制代码

按照咱们默认的配置，显示的是

咱们使用Vue调试插件，去改变Vue对象的值，就会随着条件的变化而变化显示了呢

关于这个配置，既能够是布尔类型，也能够是任何返回结果是布尔类型的等式，如: a==1

v-show

display:none 和display：block的切换

<div id="app"></div>
<script type="text/javascript"> new Vue({ el: "#app", template: ` <div> <span v-show="checkvshow">v-show测试</span> </div> `, data: function () { return { checkvshow: true } } }) </script>
复制代码

v-for

v-for
- 数组 item，index
- 对象 value，key ，index

迭代一个数组

<div id="app">
    <div>
        <ul>
            <li v-for="item in arrs">{{item}}</li>
        </ul>
    </div>
</div>
<script type="text/javascript"> new Vue({ el: "#app", data: function () { return { arrs: ['足球', '篮球', '排球'] } } }) </script>
复制代码

页面效果

迭代一个对象

<div id="app">
    <div>
        <ul>
            <li v-for="item in person">{{item}}</li>
        </ul>
    </div>
</div>
<script type="text/javascript"> new Vue({ el: "#app", data: function () { return { person: {name: '张三', age: 23, birth: '1999-01-01'} } } }) </script>
复制代码

执行结果为

至关于咱们获取到了值，那若是咱们想获取键该怎么办？

<li v-for="item,key in person">{{key}} - {{item}}</li>
复制代码

获取序号

<li v-for="item,key,index in person">{{index}}:{{key}} - {{item}}</li>
复制代码