Vue2.0内部指令

最新推荐文章于 2022-08-06 13:33:14 发布

x_minqu

最新推荐文章于 2022-08-06 13:33:14 发布

阅读量482

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_46483779/article/details/123440731

版权

1.Vue2.0 的基本使用

1.下载vue两个版本

开发版本：包含完整的警告和调试模式
生产版本：删除了警告，进行了压缩

2.live-server使用

用npm全局安装
npm install live-server -g

在项目目录中打开
live-server


<script type="text/javascript" src="../assets/js/vue.js"></script>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>

v-if的使用 else

<h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好：JSPang</div>
        <div v-else>请登录后操作</div>

    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               isLogin:false
            }
        })
    </script>

v-show的使用

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

v-if和v-show的区别

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

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

1.基本用法

模板写法

 <li v-for="item in items">
        {{item}}
</li>

js写法

var app=new Vue({
     el:'#app',
     data:{
         items:[20,23,18,65,32,19,54,56,41]
     }
})

完整代码：

    <h1>v-for指令用法</h1>
    <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">
                {{item}}
           </li>
       </ul>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                items:[20,23,18,65,32,19,54,56,41]
            }
        })
    </script>

排序

用到了Vue的computed:属性。

computed:{
    sortItems:function(){
          return this.items.sort();
    }
}

小程序还是有个小Bug的，现在我把数组修改成这样

我们可以自己编写一个方法sortNumber，然后传给我们的sort函数解决这个Bug。

function sortNumber(a,b){
            return a-b
  }

用法

computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
 }

对象循环输出

定义数组

students:[
  {name:'jspang',age:32},
  {name:'Panda',age:30},
  {name:'PanPaN',age:21},
  {name:'King',age:45}
]

在模板中输出

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

加入索引序号：

//数组对象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}

有了数组的排序方法，在computed中进行调用排序

sortStudent:function(){
     return sortByKey(this.students,'age');
}

v-text & v-html

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。完整代码：

<h1>v-text & v-html 案例</h1>
    <hr>
    <div id="app">
        <span>{{ message }}</span>=<span v-text="message"></span><br/>
        <span v-html="msgHtml"></span>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!',
                msgHtml:'<h2>hello Vue!</h2>'
            }
        })
    </script>

v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

使用绑定事件监听器，编写一个加分减分的程序。

<h1>v-on 事件监听器</h1>
    <hr>
    <div id="app">
       本场比赛得分： {{count}}<br/>
       <button v-on:click="jiafen">加分</button>
       <button v-on:click="jianfen">减分</button>

    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                count:1
            },
            methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    this.count--;
                }
            }
        })
    </script>

v-on简单写法用@代替

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。绑定事件写法

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。

v-model指令

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

双向绑定代码

//html文件
<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>


//javascript代码

var app=new Vue({
  el:'#app',
  data:{
       message:'hello Vue!'
  }
 })

修饰符

.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

文本区域加入数据绑定

<textarea  < cols="30" rows="10" v-model="message"></textarea>

对选按钮绑定一个值

<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

多选绑定一个数组

<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

单选按钮绑定数据

<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>

v-bind 指令

v-bind是处理HTML中的标签属性的，例如

就是一个标签，也是一个标签，我们绑定上的src进行动态赋值。

//html文件
<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>
//在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到//的。
//js文件

var app=new Vue({
    el:'#app',
    data:{
          imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
     }
})
//我们在data对象在中增加了imgSrc属性来供html调用。

v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

绑定css样式

绑定的值必须在vue中的data属性中进行声明。 1、直接绑定class样式

<div :class="className">1、绑定classA</div>

2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

<div :class="{classA:isOk}">2、绑定class中的判断</div>

3、绑定class中的数组

<div :class="[classA,classB]">3、绑定class中的数组</div>

4、绑定class中使用三元表达式判断

<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>

5、绑定style

<div :style="{color:red,fontSize:font}">5、绑定style</div>

6、用对象绑定style样式

<div :style="styleObject">6、用对象绑定style样式</div>

var app=new Vue({
   el:'#app',
   data:{
       styleObject:{
           fontSize:'24px',
           color:'green'
            }
        }
})

其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

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

<div v-pre>{{message}}</div>

这时并不会输出我们的message值，而是直接在网页中显示{{message}}

v-cloak指令

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

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

v-once指令

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

<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>

x_minqu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0内部指令

1.Vue2.0 的基本使用1.下载vue两个版本开发版本：包含完整的警告和调试模式生产版本：删除了警告，进行了压缩2.live-server使用用npm全局安装npm install live-server -g在项目目录中打开live-server<script type="text/javascript" src="../assets/js/vue.js"></script><body> <h1>Hello
复制链接

扫一扫