今日学习总结
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
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>
复制代码