Vue入门学习笔记2 Vue内部指令整理

最新推荐文章于 2020-05-17 20:48:24 发布

会左勾拳的螳螂

最新推荐文章于 2020-05-17 20:48:24 发布

阅读量1.7k

点赞数 2

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/RuiHe_pan/article/details/106018210

版权

本文是Vue入门学习笔记的第二篇，主要整理了Vue的内部指令，包括v-if/v-else/v-show的区别，v-for的遍历用法，v-text/v-html的安全问题，v-on事件绑定，v-model的数据源绑定，v-bind的属性绑定，以及v-pre/v-cloak/v-once的特殊用途。文章还提供了多个实例帮助理解。

摘要由CSDN通过智能技术生成

Vue入门学习笔记2 Vue内部指令整理

上一篇整理总结了Vue的准备知识和运行环境、IDE的介绍以及以一个hello world介绍了Vue的基础语法及应用，这篇将介绍Vue的内部指令。

上一篇的链接：vue.js 入门学习笔记一

参考学习视频链接：Vue2.x从入门到实战

1、Vue内部指令概览

指令	描述
v-if	条件渲染，就像平常写的if语句一样的道理
v-else	必须与v-if搭配使用，如同普通的else语句，意为否则
v-show	与if类似，如果布尔值为true就显示
v-for	循环遍历渲染
v-text	绑定文本
v-html	绑定HTML标签
v-on	绑定事件，如点击事件、鼠标键盘事件等
v-model	数据源绑定
v-bind	用于绑定标签属性
v-pre	原样输出
v-cloak	渲染完成后才显示
v-once	第一次渲染的时候渲染，既仅渲染一次

2、v-if & v-else & v-show 实例

v-if和v-else通常是组合使用的，就像我们平常在js中写的if-else一样的作用。
v-show同样通过boolean修改标签的css的display属性来进行显示或异常
v-if与v-show的区别：v-if判断真假，如果为真继续加载执行后面的内容，如果为假则不再加载后面的内容，大大减少服务器压力。而v-show则不一样，不管真假都会加载全部内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if & v-else & v-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好主人，欢迎回来~</div>
        <div v-else>不好意思，请您先登录！</div>
        <!-- v-if判断是否加载，true加载，false不加载，简轻服务器压力 -->
        <div v-show="isLogin">v-show怎样都会加载，修改的是display属性</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
   
            el:"#app",
            data:{
   
                isLogin:true
            }
        })
    </script>
</body>
</html>

3、v-for 实例

v-for循环遍历，通常用在遍历数组渲染页面。下面这个例子介绍了便利数组和对象的使用，以及排序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world!</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItmes">
                {
   {
   item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in sortStudents">
                {
   {
   index}}_{
   {
   item.naem}}-{
   {
   item.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
   
            el:'#app',
            data:{
   
                itmes:[35,25,8,56,61,10,63],
                students:[
                    {
   naem:"panruihe",age:"24"},
                    {
   naem:"ruihe",age:"15"},
                    {