Vue基础知识

2019-06-16  本文已影响0人  饥人谷_阿银

构造器

filters


   <div id="app">
        <p>{{message | changeChar}}</p>
       <button @click="changeFirstChar">改变</button>
    </div>

   new Vue({
    el: "#app",
    data: {
      message:'nihao'
    },
    methods: {
        changeFirstChar: function(todo){
            this.message = 'good evening'
        }
      },
      filters:{
        changeChar(value){
                if(!value){
            return '';
          }else{
            return value.charAt(0).toUpperCase()+value.substring(1)
          }
        }
      }
    })

缩写

computed


<div id="app">
   {{fullName}}
</div>

new Vue({
  el: "#app",
  data: {
          firstName:'Ji',
            lastName:'RenGu'
  },
     computed:{
      fullName(){
        return this.firstName+'----'+this.lastName;
    }
  }
})

watch


    <div id="app">
        {{msg}} <br> 
        改变了吗? {{isChange}}
        <button @click="change">改变</button>
    </div>

    new Vue({
      el: "#app",
      data: {
            msg:'欲穷千里目',
          isChange:'No'
      },
        watch:{
        //只要msg改变,这个方法就会执行
        msg(val,oldVal){
            this.isChange = 'Yes'
        }
      },
      methods:{//不得不说ES6写起来真爽
        change(){
            this.msg = '更上一层楼'
        }
      }
    })


* computed方法


<div id="app">
此时的onpiece: {{onepiece}} <br>
此时的msg: {{msg}} <br><br>
<button @click="setName">设置name</button>
</div>

new Vue({
el: "#app",
data: {
name:'Kobe',
msg:''
},
methods:{
setName(){
this.onepiece = 'JorDan'
}
},
computed:{
onepiece:{
get(){
return this.name +'Bryant';
},
set(newVal){
//当你给onepiece设置值的时候set就就会调用
this.msg = newVal+'is the greatest basketball player';
}
}
}
})

class与style绑定

绑定HTML class

绑定class的几种方式

.classC{
  color:red;
}
.classD{
  font-weight:bold;
}
.classE{
  font-size:20px;
}
.classF{
  color:blue;
}
.classM{
  display:block;
}
.classN{
  display:none;
}


<div id="app">
 <h2>class属性绑定</h2>
-------------------绑定变量-------------------------
<div :class="{classA:a,classB:b}">
  绑定变量
</div>
 -------------------绑定对象-------------------------
<div :class="styleObj">
  绑定对象
</div>
 -------------------绑定数组-------------------------
<div :class="arrClass">
  绑定数组
</div>
  -------------------绑定三元运算符-------------------------
<div :class="m==true?'classM':'classN'">
  绑定变量
</div>
  <button @click="toggle">toggle</button>
</div>


new Vue({
  el: "#app",
  data: {
   a:true,
   b:false,
   styleObj:{
    classC:true,
    classD:true
   },
   m:true,
   arrClass:['classE','classF']
  },
  methods:{
    toggle(){
        this.m=!this.m;
    }
  }
})


### 绑定内联样式
* 对象语法
    * 内联式对象语法
    * 样式对象式对象语法（更推荐）
* 数组语法
* 自动添加前缀
    * v-bind:style 当需要特定的前缀时如transform，vue.js会自动添加
* 多重值
    * 从vue2.3+后，可以为一个属性添加多个值的数组，常用于含有多个前缀的情况
例子跟上边差不了多少,懒得写了.相信大家应该也都会,哈哈哈哈~~~

## 条件渲染
### v-if（v-else）是真正的渲染
* template元素与v-if
* v-else（需要紧跟在v-if后边）
* v-else-if（vue2.1.0新增）
* 用key管理可复用的元素---(如果这个例子看不懂的话.可以在群里问我!!!)
    * 例子：用户名和邮箱登录界面 如果有key就不会复用,大家可以把key去试一下,然后输入看一下效果!!!


    <div id="app">
      <template v-if="ok==='username'">
          用户名: <input type="text" placeholder="请输入用户名" key="name-input">
      </template>
      <template v-else>
         密码: <input type="text"  placeholder="请输入密码" key="psd-input">
      </template>
      <button @click="toggle">点击切换类型</button>
    </div>

    new Vue({
      el: "#app",
      data: {
       ok:'username'
      },
      methods: {
        toggle: function(todo){
            if(this.ok==='username'){
            this.ok = 'psd'
          }else{
            this.ok = 'username';
          }
        }
      }
    })


### v-show（其只是简单的切换display属性）
* v-show不支持template语法
* v-show不支持v-else
### v-if VS v-show
* v-if
    * 当条件不成立时不会渲染
    * 切换开销较大，适合不太可能变化的场景
* v-show
    * 无论成不成立都会渲染
    * 首次渲染开销较大，但切换开销小，因此适合经常变化的场景
## 列表渲染
### v-for
* 基本用法
    * 简单例子
    * 带有index参数
    * 使用of 替代 in
* template v-for
    * 简单例子
* 对象迭代 v-for
    * 基础用法
    * 带其他参数用法
* 整数迭代 v-for
    * 例子
* 组件和v-for
 包含所有类型的例子


<div id="app">
<hr>
<strong style="border:2px solid #ccc;">遍历数组:</strong>
<ul>
<li v-for="item in items" >{{item}}</li>
</ul>
<hr>
<strong style="border:2px solid #ccc;">遍历对象数组:</strong>
<ul>
<li v-for="(item,index) in pers">{{index}}--我是{{item.name}},今年{{item.age}}岁</li>
</ul>
<hr>
<strong style="border:2px solid #ccc;">遍历对象:</strong>
<ul>
<li v-for="(value,key) in obj">
key:{{key}} |
value:{{value}}
</li>
</ul>
</div>

new Vue({
el: "#app",
data: {
isOK:'true',
items:['香蕉','苹果','烤肉'],
pers:[{
name:'Kobe',
age:'40'
},
{
name:'James',
age:'38'
}],
obj:{
1:'one',
2:'two'
}
}
})

key

<div id="app">
  KEY: <input type="text" v-model="id"> 
  VALUE: <input type="text" v-model="name">
  <button @click="add">添加</button>
  <ul>
<li v-for="item in list" :key="item.id"> 
//此处你可以把key去了,先勾选一条,在追加一条试一下,然后加上key,勾选一条追加一条再试一下,一目了然
  <input type="checkbox" >
  {{item.id}}---{{item.name}}
</li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    id:"",
    name:"",
    list:[
      {id:1, name:'李斯'},
      {id:2, name:'嬴政'},
      {id:3, name:'赵高'},
      {id:4, name:'韩非'},
      {id:5, name:'荀子'},
    ]
  },
  methods: {
      add: function(){
        this.list.unshift({id:this.id,name:this.name})
    }
  }
})

因为加上key默认采取的就是就地复用策略

数组更新检测


       <div id="app">
       <button @click="setZF">设置第二项为张飞</button>
       <button @click="setGY">设置第三项为关羽</button>
       <ul>
       <li v-for="item in list">
       <input type="checkbox" >
       {{item.id}}---{{item.name}}
       </li>
       </ul>
       </div>

var vmm = new Vue({
el: "#app",
data: {
id:"",
name:"",
list:[
{id:1, name:'李斯'},
{id:2, name:'嬴政'},
{id:3, name:'赵高'},
{id:4, name:'韩非'},
{id:5, name:'荀子'},
]
},
methods: {
setZF: function(){
Vue.set(this.list,1,{id:2,name:'张飞'})
},
setGY:function(){
this.list.splice(2,1,{id:3,name:'关羽'})
}
}
})


* 修改数组长度时，vue不能检测变动，如：vm.items.length = newLength
* 只能用example1.items.splice(newLength)

对与显示过滤/排序结果的两种方法

计算属性应用于过滤


<div id="app">
{{specialNum}}
</div>

new Vue({
el: "#app",
data: {
nums:[1,2,3,4,5,6,7,8,9]
},
computed:{
specialNum(){
return this.nums.filter((item,index)=>{
return item%3==0;
})
}
}
})

<div id="app">
<ul>
在v-for循环中直接嵌入方法
<li v-for="item in fil(numbers)">{{item}}</li>
</ul>
</div>

new Vue({
el: "#app",
data: {
numbers:[1,2,3,4,5,6,7,8,9]
},
methods:{
fil(nums){
return nums.filter((item,index)=>{
return item%3==0;
})
}
}
})

两个简单的事件处理器

先来一个简单小例子,v-on用来绑定事件


<div id="app">
<button @click="num+=1">增加1</button>
{{num}}
</div>

* * *

<div id="app">
<button @click="sayHello">点击sayHello</button>
</div>
new Vue({
el: "#app",
methods: {
sayHello: function(){
alert('sayHello')
}
}
})
`### 内联处理器方法 * 访问原生DOM事件的例子,如果click事件不传参数,就默认把原生DOM传递进去`
<div id="app"> //没有传参数,就是原生的!!!
<button @click="showBtnname">显示按钮的名字</button> <br><br>
{{msg}}
</div>

new Vue({
el: "#app",
data: {
msg:''
},
methods: {
showBtnname: function(e){
this.msg = e.target.innerText;
}
}
})



----------------------------html---------------------------------
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="checkbox" v-on:change="toggle(todo)" v-bind:checked="todo.done">
      <del v-if="todo.done">
        {{ todo.text }}
      </del>
      <span v-else>
        {{ todo.text }}
      </span>
    </label>
  </li>
</ol>
</div>
----------------------------js---------------------------------
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
----------------------------css---------------------------------
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}

#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}

li {
margin: 8px 0;
}

h2 {
font-weight: bold;
margin-bottom: 15px;
}

del {
color: rgba(0, 0, 0, 0.3);
}

事件修饰符

按键修饰符

<div id="app">
<button @click.ctrl="num++">num+1</button>
{{num}}
</div>

new Vue({
  el: "#app",
  data: {
      num:0
  }
})


### vue2.1.0新增 按键修饰符

*   .ctrl
*   .alt
*   .shift
*   .meta

    ## 表单控件绑定

    ### 基础用法

*   文本

    ```
      <div id="app">
        <h2>{{msg}}</h2>
        <br>
        <input type="text" v-model="msg">
      </div>

      new Vue({
        el: "#app",
        data: {
         msg:'万年的msg'
        }
      })

    ```

*   多行文本---注意了啊:在文本区域插值( `<textarea></textarea>` ) 并不会生效，应用 `v-model` 来代替

    ```
      <div id="app">
      <p  style="white-space: pre">
        {{msg}}
      </p>
        <br>
        <textarea type="text" v-model="msg"></textarea>
      </div>

    ```

*   复选框

    *   单个复选框(直接绑定true,false)

        ```
        <div id="app">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        </div>

        new Vue({
          el: "#app",
          data: {
           checked:true
          }
        })

        ```

    *   多个复选框(将选中的所有value绑定到一个数组)

        ```
        <div id="app">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            {{checkedNames}}
        </div>

        new Vue({
          el: "#app",
          data: {
            checkedNames:[]
          }
        })

        ```

*   单选按钮(绑定选中的单选框的value)

    ```
      <div id="app">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
      </div>

      new Vue({
        el: "#app",
        data: {
          picked:''
        }
      })

    ```

*   选择列表(不管是单选还是多选,v-model都要绑定到select元素上)

    *   单选列表(绑定到被选中项的value)

        ```
          <div id="app">
              <select v-model="selected">
                <option>A</option>
                <option>B</option>
                <option>C</option>
              </select>
              <span>Selected: {{ selected }}</span>
          </div>

          new Vue({
            el: "#app",
            data: {
              selected:''
            }
          })

        ```



### 修饰符

*   .lazy

    *   由原有的input事件变更为change事件

        ```
          <div id="app">
            <input type="text" v-model.lazy="msg">
            {{msg}}
          </div>

          new Vue({
            el: "#app",
            data: {
              msg:'万年的msg'
            }
          })

        ```

*   .number

    *   将输入的类型转换成数字类型（NaN则还是原有类型）
*   .trim
    *   去除两端空白

算了,这点太简单

### v-model与组件

## 组件

### 使用组件

*   注册

    *   注意事项

        *   在初始化根实例前一定要确保注册了组件
        *   名称最好 小写（可以使用短杆）

            ```

            <div id="app">
            <my-comp></my-comp>
            </div>


Vue.component('my-comp',{
    template:'<h3>我是新出炉的组件</h3>'
})
new Vue({
  el: "#app",
  data: {

  }
})
```


*   局部注册

    ```
      <div id="app">
        <my-comp></my-comp>
      </div>

      new Vue({
        el: "#app",
        components:{
            'my-comp':{template:'<h3>我是新出炉的组件</h3>'}
        },
        data: {

        }
      })

    ```

*   DOM模板解析说明

    *   自定义组件在这些元素内受限

        *   ul

        *   ol

        *   table

        *   select

        *   概要: 解决方案是 使用 特殊的is属性

            ```
            <div id="app">
            <table>

            ```
             <tr>
             <my-comp></my-comp>//注意:这样写是绝对错误的,因为tr中只允许有td,这样写他是不认识滴
             </tr>

            ```

            </table>
            </div>
            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 上边是错误的


    ---------------------------------下边是正确的-----------------------------------
    <div id="app">
     <table>
       <tr>
         <td is="my-comp"></td>
       </tr>
     </table>
    </div>

    new Vue({
      el: "#app",
      components:{
          'my-comp':{
                template:'<td>我是组件td</td>'
        }
      },
      data: {

      }
    })
    ```

Prop（子组件从父组件获得数据）

          <div id="app">
            <input type="text" v-model="fathertext">
                {{fathertext}}
            <child :childText="fathertext"></child>
          </div>

          new Vue({
            el: "#app",
            components:{
                'child':{
                  props:['childtext'],
                  template:'<h1>{{childtext}}</h1>'
              }
            },
            data: {
                fathertext:''
            }
          })

自定义事件（子组件将数据传回父组件）

* 例子

    * html及实例部分和注册组件部分

      ```
      <div id="app">
        <price-input :value="price" @input="isinputing"></price-input>
        {{price}}
      </div>

      new Vue({
        el: "#app",
        components:{
            'price-input':{
              template:"<input type='text' @input='update($event.target.value)' />",
            props:['value'],
            methods:{
                update(val){
                  this.$emit('input',val)
              }
            }
          }
        },
        data: {
          price:''
        },
        methods: {
            isinputing: function(val){//此处的value就是子组件传递过来的
              this.price = val;
          }
        }
      })
      ```

非父子组件通信

* 复杂的场景---专门的状态管理模式vuex

使用Slot分发内容

        * 那么单个slot怎么用呢?

            ```
            <div id="app"> 
            <children> 
            <span>12345</span> 
            <!--上面这行不会显示--> 
            </children> 
            </div> 

            var vm = new Vue({ 
            el: '#app', 
            components: { 
            children: { //这个无返回值，不会继续派发 
                template: "<button><slot></slot>(我是button)</button>"
            } 
            } 
            }); 
            ```

* 当父组件中有内容时
    * 子组件中的slot会被父组件中内容所替换。（slot标签也会被替换掉）
* 当父组件中无内容时
    * 子组件中slot内容会被显示出来


        Vue.component('child',{
                props:["items"],
                template:'<ul><slot name="item" v-for="item in items" v-bind:tex="item.text"></slot></ul>'
            });

        new Vue({
            el:'#app',
            data:{
                items:[
                    {text:'老虎'},
                    {text:'棒子'},
                    {text:'鸡'}
                ]
            }
        })
        ```

动态组件

上一篇下一篇

猜你喜欢

热点阅读