vue的项目结构搭建和内部指令_vue 结构快速搭建指令-优快云博客

本文链接：https://blog.youkuaiyun.com/liurong1028/article/details/80702332

1. 项目结构搭建

(1) cnpm install --global vue-cli

(2) vue init webpack my-project

(3) cd my-project

(4) cnpm install

(5) cnpm run dev

2. sass的安装：

cnpm install node-sass --save

cnpm install sass-loader --save

3. 内部指令

(1) v-if v-else v-show 指令

v-if:是vue 的一个内部指令，指令用在我们的html中。

v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

<!DOCTYPE html>

<head>

</head>

<body>

<h1>v-if 判断是否加载</h1>

<hr>

<div v-if="isLogin">你好：JSPang</div>

<div v-else>请登录后操作</div>

</div>

var app=new Vue({

el:'#app',

data:{

isLogin:false

}

})

</script>

</body>

</html>

这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：JSPang，如果为false时，就显示请登录后操作。

v-show ：

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<divv-show="isLogin">你好：JSPang</div>

v-if 和v-show的区别：

· v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。

· v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for指令：解决模板循环问题

v-for指令是循环渲染一组data中的数组，v-for 指令需要以item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

<!DOCTYPE html>

<head>

</head>

<body>

<h1>v-for指令用法</h1>

<hr>

<ul>

</li>

</ul>

</div>

var app=new Vue({

el:'#app',

data:{

items:[20,23,18,65,32,19,54,56,41]

}

})

</script>

</body>

</html>

这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，你需要那个html标签循环，v-for就写在那个上边。

v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

v-cloak指令

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，

v-pre指令

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

v-bind 缩写 :

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

v-on 还有一种简单的写法，就是用@代替。

v-text & v-html

我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的

需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。