Vue基础

目录

• Vue 基础
  • npm的使用
  • 模板语法起步
  • v-xxx 指令
    • v-if & v-show(v-hide)
    • v-for
    • v-html & v-text
    • v-bind
    • v-on
    • v-model 双向数据绑定

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:'学习数据的双向绑定'
                }
            }
        });