zoukankan      html  css  js  c++  java
  • Vue基础

    Vue 基础

    npm的使用

    node.js -- npm

    python -- pip

    语法

    npm init -- yes  # 自动生成一个package.json文件
    
    npm install vue --save # 下载或删除包
    npm  uninstall vue --save
    
    npm install # 下载所有依赖包
    

    模板语法起步

    {{变量}}
    {{1+1}}
    {{'hello'}}
    {{函数的调用}}
    {{1==1?'真的':'假的'}}
    
    console.log(app.$data)
    console.log(app.$el===document.getElementById('app'));
    // 在vue实例化对象之后,这个对象中属性 前面会有$,主要是跟我们自己定义的属性区分
    </pre>
    

    v-xxx 指令

    v-if & v-show(v-hide)

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。(display:none)
    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

     .box {
             100px;
            height: 100px;
            background-color: red;
        }
    
    <div class="box" v-if='isShow'></div>
    <div class="box" v-show='isShow'></div>
    
    isShow: true,
    
    <div v-if='Math.random() > 0.5'>
                此值大于0.5
    </div>
    <div v-else>
                此值小于0.5
    </div>
    

    v-for

    <ul>
        <li v-for='(item,index) in menuList'>
            <h3>{{index}}--菜名:{{item.name}}</h3>
            <p>价格{{item.price}}</p>
        </li>
    </ul>
    
    
     menuList: [
                // 数据驱动视图
               { id: 1, name: '大腰子', price: 60 },
               { id: 2, name: '宫保鸡丁', price: 30 },
               { id: 3, name: '炸黄花鱼', price: 70 },
               { id: 4, name: '炸黄花鱼2', price: 30 }
              ]
    
    <ul>
        <li v-for='(value,key) in object'>
            {{key}}--{{value}}
        </li>
    </ul>
    
    object: {
        name: 'alex',
        age: 19,
        fav: '喜欢拍av'
    },
    

    v-html & v-text

    v-text 以文本形式显示
    v-html 以html方式显示

     <h2 v-text='msg2'></h2> #  不带跳转
     <p v-html='msg2'></p> # 带跳转
      
    msg2: '<a href="#">这是我的数据</a>',
     
    

    v-bind

    给标签绑定属性值
    注意只要使用了v-bind 后面的字符串一定是data属性中的值

    
    <div class="wrap" v-bind:class='{active:isGreen}'></div>
    <a v-bind:href="href">路飞</a>
    
    
    data: {
            isGreen:true,
            href:'https://www.luffycity.com/course'
        }
    

    v-on

     <div class="box" v-on:click = 'count+=1'>{{count}}</div>
     <div class="box" v-on:click = 'isShow = false' v-if='isShow'></div>
    
    <div class="box" v-on:click = 'showHanlder()' v-if='isShow'></div> 
    <button  v-on:click='showHanlder'>{{btnText}}</button>
    <div class="box"  v-if='isShow'></div>
    
    <div class="isGreen" v-bind:class = '{active:isYellow}'></div>
    <button v-on:click='changeColor'>切换</button>
    
    
    
    
    
    data:function(){return {
    
      count:0,
      isShow:true,
      btnText:'隐藏',
      isYellow:false
      }
    },
    // 在vue中所有的事件都声明methods
    methods:{
     showHanlder(){
      console.log(this);
      // this.isShow = false;
    
     // if (this.isShow) {
     //   this.isShow = false; //   this.btnText = '显示';
     // }else{
             //   this.isShow = true; //   this.btnText = '隐藏';
     // }
      this.isShow = !this.isShow
      },
      changeColor(){
      this.isYellow = !this.isYellow;
      }
    }
    
    

    v-model 双向数据绑定

    <input type="text" v-model = 'text'>
    <h3>{{ text }}</h3>
    
    new Vue({
                el:"#app",
                template:``,
                data(){
                    return {
                        text:'学习数据的双向绑定'
                    }
                }
            });
    
  • 相关阅读:
    2013=730 胆子要大,敢想敢做
    2013=7=30 自增量的浅谈
    2013=7=29 nyist 13题
    2013=726 整合,优化,利用自身资源。 让自己的时间更有意义,最大化利用
    2013=7=22
    2013=7=23 超级阶梯
    机器人写诗项目——递归神经网络(RNN)
    和程序员在一起是怎样的体验
    和程序员在一起是怎样的体验
    人工智能数学基础——线性代数
  • 原文地址:https://www.cnblogs.com/tangshuo/p/12744221.html
Copyright © 2011-2022 走看看