为了账号安全,请及时绑定邮箱和手机立即绑定

vue.js基础学习笔记-one

标签:
Vue.js

学习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>

先介绍到这里 下面在更新

点击查看更多内容
5人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
3
获赞与收藏
8

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消