season1. 初识Vue

于 2019-05-16 21:23:59 发布
阅读量99 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012759262/article/details/101466196
版权

内部指令

基本指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <div id="app">
      <h3>1、展示变量</h3>
      {{message}}
      <hr>

      <h3>2、if else 判断</h3>
        <div v-if="isLogin">islogin = true</div>
        <div v-else>请登录后操作</div>
        <div v-if="isLogout">a</div>
        <div v-else>isLogout = fasle</div>
      <hr>

      <h3>3、v-for指令 ：解决模板循环问题</h3>
      <hr>
      <li v-for="item in items">
        {{item}}
      </li>

      <h3>4、Vue的computed:属性</h3>
      <hr>
      <li v-for="sortItem in sortItems">
        {{sortItem}}
      </li>

      <h3>5、Vue的对象循环输出</h3>
      <hr>
      <ul>
         <li v-for="student in sortStudent">
             {{student.name}} - {{student.age}}
         </li>
      </ul>

    </div>

    <script type="text/javascript">
        var app=new Vue({
          el:'#app',
          data:{
            message:'hello Vue!',
            isLogin: true,
            isLogout: false,
            items:[20,23,181,65,32,19,54,56,41],
            sortItem:[20,23,181,65,32,19,54,56,41],
            students:[
              {name:'jspang',age:32},
              {name:'Panda',age:30},
              {name:'PanPaN',age:21},
              {name:'King',age:45}
            ]
          },
          computed:{
            sortItems:function(){
              return this.sortItem.sort(sortNumber);
            },

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

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

        //数组对象方法排序:
        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));
           });
        }
    </script>
</body>
</html>

注意事项：

  • 高版本中，items和computed是不允许相同名称
  • 在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>v-on 事件监听器</h1>
    <hr>
    <div id="app">
      本场比赛得分： {{count}}<br/>
      <button v-on:click="jiafen">加分</button>
      <button v-on:click="jianfen">减分</button>
      <button @click="reset">重置</button>
      <input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
    </div>

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

数据源绑定

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>v-on 事件监听器</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{message}}</p>
        <h3>文本框</h3>
        <p>v-model:<br><input type="text" v-model="message"></p>
        <p>v-model.lazy(移出文本框后数据同步):<br><input type="text" v-model.lazy="message"></p>
        <p>v-model.number(检测数字):<br><input type="text" v-model.number="message"></p>
        <p>v-model.trim(消除空格):<br><input type="text" v-model.trim="message"></p>

        <hr>
        <p>原始文本信息：{{textMessage}}</p>
        <textarea cols="30" rows="10" v-model="textMessage"></textarea>

        <hr>
        <h3>多选按钮绑定一个值</h3>
        <p>原始文本信息：{{isTrue}}</p>
        <input type="checkbox" id="IDisTrue" v-model="isTrue">
        <label for='isTrue'>{{isTrue}}</label>


      <hr>
      <h3>多选绑定一个数组</h3>
      <p>
        <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
        <label for="JSPang">JSPang</label><br/>
        <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
        <label for="JSPang">Panda</label><br/>
        <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
        <label for="JSPang">PanPan</label>
        <p>{{web_Names}}</p>
      </p>

      <hr>
      <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>
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               message:'hello Vue!',
               textMessage:'hello textMessage!',
               isTrue: true,
               web_Names:[],
               sex:[],
            },
        })
    </script>
</body>
</html>

样式绑定

v-bind指令：Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .base {
      width: 200px;
      height: 200px;
    }

    .active {
      background: green;
    }

    .text-danger {
      background: red;
    }
  </style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ active: isActive, base: hasBase }"></div>
  <hr>
  <h3>多样式类绑定</h3>
  <div class="static"
       v-bind:class="{ base: hasBase, active: isActive, 'text-danger': hasError }">
  </div>

  <hr>
  <h3>数组绑定</h3>
  <div v-bind:class="[baseClass, activeClass, errorClass]"></div>

</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isActive: true,
      hasError: true,
      hasBase: true,
      baseClass: 'base',
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  })
</script>
</body>
</html>

小结

el 是什么东西？

EntropyPlus
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值