vuejs--基本指令1_综合

vuejs的下载

1，可以通过复制官网链接cdn，链接最新版本的vue（最新的稳定版）
2，通过nodejs，在其包管理器npm或者yarn进行下载
3，直接去github上面下载源码

代码托管平台

码云 gitee
gitlab（一个产品，完全类似GitHub或者gitee，是一个可以在企业内部运行的代码托管平台）（商业公司更愿意使用 svn 作为版本控制器）
coding.net（深圳一家公司做的代码的托管平台）

vue指令

v-for 遍历数组，对象

1，v-for 是些在最小的循环单元里面的
2，v-for=’’ "引号里面其实是一个for in循环
3，v-for 可以遍历数组和对象

<body>
<ul><li v-for="item in arr">{
    {
     item }}</li>
</ul><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm=new Vue({
    el:'ul',data:{
    arr:[1,2,3,4]}})
</script>
</body>

v-html 转译html原文

1，如果是直接在插值表达式里面书写html代码，那么vue不会进行转译，为了防止xss攻击，
2，在需要转译的地方加上v-html=" "，引号里面是html代码或者模型变量，vue就会对html代码进行转译，但是这个方法使用要慎重，要确保你的html代码是安全的
3

<body>
<div><p >{
    {
     html}}//<p>hello</p></p><p v-html="html"></p>//hello
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    html: "<p>hello</p>"}})</script>
</body>

v-text 设置元素的innerText作为模型变量的值

1， < p>{ { title }}< /p>有页面闪烁问题：如果网络差，或者用户电脑配置差，用户会看到插值表达式
2，用v-text可以完美的解决页面闪烁问题，因为这种方式在标签内没有插值表达式
3，但是如果标签之间还有别的内容的话，就会覆盖，用拼接的方式将标签里面原有的东西放在v-text里面就可以解决
4，但是这里要注意一个问题，拼接的时候，外面是单引号，里面要双引号，外面双，里面就要单

<body>
<div><!--页面闪烁问题：如果网络差，或者用户电脑配置差，用户会看到插值表达式--><p>{
    {
     title }}</p><!--用v-text可以完美的解决页面闪烁问题，因为这种方式在标签内没有插值表达式--><p v-text="title"></p><!--但是如果标签之间还有别的内容的话，就会覆盖，--><!--解决方法如下，用拼接的方式将标签里面原有的东西放在v-text里面--><!--但是这里要注意一个问题，拼接的时候，外面是单引号，里面要双引号，外面双，里面就要单--><p v-text="'内容：'+title"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title: "hello vue!"}})</script>
</body>

v-cloak 解决页面闪烁问题

不希望出现闪烁的标签设置 v-cloak属性
设置 style 样式，使用该属性选择器：display:none
当执行完毕后,vuejs 会把所有有 v-cloak指令移除

css：

<style>[v-cloak]{
    display: none;}
</style>

html：在标签上加上v-cloak属性

<p v-cloak>{
    {
    title}}
</p>

js：这里没有需要修改的地方

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    title: "hello vue!"}})</script>

v-if 删除和添加节点

1，true时显示，false时隐藏

<body>
<div>
<p v-if="true">//显示{
    {
    title1}}
</p>
<p v-if=" false ">{
    {
     title2}}</p>//隐藏
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title1: "hello if!",title2:"hello else"}})</script>
</body>

v-if 和 v-else

1,当v-if 为true时，v-else为false，当v-if为true时，v-else 为 false

<body>
<div>
<p v-if="true">//显示{
    {
    title1}}
</p>
<p v-else>{
    {
     title2}}</p>//隐藏
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title1: "hello if!",title2:"hello else"}})</script>
</body>

结果如下，v-if和v-else是将元素移除或者添加
在这里插入图片描述

v-show 控制display属性，显示与否

当true时，display：block,当false时，display：none

<body>
<div><p v-show="true"> {
    {
     title1 }} </p><p v-show="false"> {
    {
     title2 }} </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "div",data: {
    title1: "hello true",title2:"hello false"}})
</script>
</body>

结果如下：v-show是控制display的属性值，但是元素还存在
在这里插入图片描述

v-if 和v-show该如何取舍？

v-if：只能实现一次的显示和隐藏
v-show：可以实现多次显示与隐藏
看你的业务需求如何，合理选择指令

v-pre 不会解析vuejs语法，原封不动的输出

<body><p v-pre> {
    {
     title }} </p><!-- 输出{
    {
     title }}-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var vm = new Vue({
    el: "p",data: {
    title: "hello true",title2:"hello false"}})
</script>
</body>