一个“好”的软件系统包括很多方面,但是界面的友好性是第一步,因为它给用户一个直观的印象。在前一次博客介绍的vue的安装配置基础上,我想对vue的一些简单操作做一总结。以下是基于实操得来的。以下内容在visual stdio code里面的终端运行,在谷歌浏览器中打开界面。
1.开始运行
在我们开始写界面的时候,一般是接着已有的工作继续做,但当你重启Visual Stdio Code程序后,会发现前面写的localhost:8080/页面打不开,这是因为你没有运行项目,假设原来的项目名为vue-demo,运行下面命令即可:
这时候刷新网站就可以看到了。
2.模板语法
Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
模板语法主要包括简单的普通文本打印,变量文本打印,以及超链接。以下是举例。
(1)普通文本渲染
输入如下:
效果如下:
这个很简单就能实现文本打印,其中h3与h5主要是指字号不同,h1>h3。
(2)双括号表示
第二种就是用变量来打印所需要的文本,用双大括号{{xxx}}表示。
效果如下:
(3)超链接
Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。其中v-html是一种特殊的格式,用来置超链接,
示例如下:
效果如下:
点击“北站”按钮,即可跳转到对应网址界面。
3.条件渲染
条件渲染和if else语句的类似,当值取true或者false的时候输出不同的结果。例如下面语句,flag取true,所有条件为真对应下的语句全部输出。
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染,你也可以使用 v-else 为 v-if 添加一个“else 区块”。需要注意的是:一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别。
示例如下:
效果如下:
4.列表渲染
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法,其中 items 是源数据的数组,而 item 是迭代项的别名,在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。我们也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
例如下图中的item.title。
效果如下:
上述的代码在Visual stdio code上运行,仅仅是一些简单的应用,特别注意return语句里面之间的逗号分隔开,不然容易报错。关于超链接,不建议大量使用,否则容易被攻击。后续还会继续学习,敬请期待!
源代码:
<template>
<div class="hello">
<h3>大凡的腿毛</h3>
<p>{{ message }}</p>
<div v-html="rawHTML"></div>
<div v-bind:id="dynamicId"></div>
<p>{{ num+10 }}</p>
<div v-if="flag">
<h5>孙猴子 啥猴子,我会在 就看到好看 举办的</h5>
<p>傻猴子</p>
</div>
<ul>
<li v-for="item in newsList">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
message:"bshchjbh",
rawHTML:"<a href='http://www.itbaizhan.com'>百战</a>",//第6行
dynamicId:10001,
num:10,
flag:true,
newsList:[
{
id:1001,
title:"进入新闻1"
},
{
id:1002,
title:"进入新闻2"
},
{
id:1003,
title:"进入新闻3"
},
]
}
}
}
</script>