vue.js基础学习笔记-one

学习vue基础以来，看各种教程，练习，随手写写，有错误请大家指导，
目前vue已经升级到2.0的版本，学习也最好是2.0的版本开始。
先看vue的几个特点：1，简单，2,轻量，3,模块友好 4, 组件化 5,数据驱动，

第一:先看一个实例： 这是一个简单的vue实例 for循环

<div id="app">
            <ul>
                  <li v-for="item in arr">{{item}}</li>
            </ul>
       </div>

       <script>
          var nm=new Vue({
                el:"#app",
                data:{
                    arr:["banner","orange","appele","yellow"]
                },

          })

       </script>

主要看js里边代码
实例化vue 代码 new Vue（{}）
el:”#app“ 挂载元素dom节点
data：初始化数据
最大的一点在也不用像jq一样去拼接字符串html模板了，直接去html渲染 数据 即可 。
入门很快。

第二：
指令 v-on vue-text v-html v-for v-bind v-if v-else v-model
1： v-on ： 绑定我们html的事件为主，可以简写为@click
例子 ：

<div id="app">
             <div  v-on:click="dianwo">{{arr}}</div>

            <button @click="jia">+</button>
                <span>{{num}}</span>
            <button @click="jian">-</button>
       </div>
       <script>
          var nm=new Vue({
                el:"#app",
                data:{
                    arr:"nihao vue",
                    num:0
                },
               methods:{
                    dianwo:function(){
                           this.arr="你点击我了，我好伤心";
                    },
                    jia:function(){
                       this.num++;      
                    },
                    jian:function(){
                         if (this.num==0) {return false}
                       this.num--;

                    }
               }

          })

       </script>

2：v-text和v-html 和jq的的的text和html基本是一样的使用方法，太简单，
3：v-for 上面实例已经介绍
4：v-bind 可以绑定我们的任何自定义类，有点和jq的attr一样
例子:

<div id="test">
           <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="src">
            <a v-bind:href="url">百度一下</a>
            <a :href="url">百度一下</a>

            <a v-on:click="update()" href="#">更改图片</a>
            <a @click="update()" href="#">更改图片</a>
  </div>
  <script type="text/javascript">
    new Vue({
      el: '#test',
      data: {
            url: "https://www.baidu.com",
            src: "img/sum.jpg"   
      },
            methods: {
            update: function(){
            this.src = "img/top.jpg";
            }
          }
    })
  </script>:

5：v-if v-else 和v-show 区别
v-if 是不让html直接干掉，html隐藏的，v-show 就是css的 display：none ，block 的转化 ，
例子：

   <div id="app">
        <div v-if="ok">我是v-if</div>
        <div v-else>我是v-else</div>
        <div v-show="ok1">我是v-show</div>
   </div>

   <script>
      var nm=new Vue({
            el:"#app",
            data:{
                ok:true,
                ok1:true
            },

      })

   </script>

6： v-model 主要是使用在表单上
我们数据的驱动，js获取表单的值 都需要绑定 v-model来获取
例子 ：

  <div id="app">
              <input type="text" v-model="arr">
              <span>{{arr}}</span>
              <hr/>
          <input type="checkbox" id="checkbox" v-model="checked">
          <label for="checkbox">{{ checked }}</label>

           <button @click="adddata">提交</button>
</div>
       <script>
          var nm=new Vue({
                el:"#app",
                data:{
                    arr:"nihao    vue",
                    checked:true,
                    checkedNames:[],
                    picked:'',
                    selected:''
                },
                methods:{
                      adddata:function(){
                            if (this.checked==false) {
                                   console.log("你需要同意注册");
                            }else{
                                  console.log(this.checked+'---'+this.picked+'---'+this.selected)
                                  console.log("你已经注册成功");
                            }

                      }
                }

          })

       </script>

先介绍到这里 下面在更新