今日学习总结

1、HelloWorld

2、基本的vue指令

HelloWorld

和所有的语言学习一样，我们来一个HelloWorld

<!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个步骤

1、导入Vue.js

2、在html中埋坑，这个坑是需要被Vue处理的

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

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

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>
复制代码

自学Vue的第02天