VUE入门学习

VUE 学习

一、模板语法

1、{{ }} 插值

new Vue({
  el: '#app',
  data: {
    message: '<h1>我是金金</h1>'
  }
})

<div id="app">
    <!-- 可以直接显示样式，即直接显示html代码-->
  <p>{{ message }}</p>
</div>

2、v-bind: 属性

v-bind:title

v-bind:class    <!--改变样式-->

v-bind:href     <!--跳转-->

3、{{表达式}}

{{5+5}}    
{{ ok ? 'YES' : 'NO' }}    
{{ message.split('').reverse().join('') }}

new Vue({
el: '#app',  
data: {
	ok: true,    
	message: 'yingxin jin',    
	id : 1  
	} 
})

4、指令（v-if）

v-if=“true/false” 

判断是否需要应用

5、 v-model

实现input框内容，可实现双向数据绑定

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'surprise!'
  }
})

6、缩写

v-on:  等同于 @
v-bind: 等同于 ：

二、循环语句

• 迭代数组

  <div id="app">
    <ol>
      <li v-for="site in sites">
        {{ site.name }}
      </li>
    </ol>
  </div>
  
  <script>
  new Vue({
    el: '#app',
    data: {
      sites: [
        { name: 'baidu' },
        { name: 'Google' },
        { name: 'Taobao' }
      ]
    }
  })
  </script>
  

• 迭代对象

  <div id="app">
    <ul>
        <!--第一种-->
      <li v-for="value in object">
          
        <!--第二种-->
  <!-- key为对象的“key”值，即name、url...  -->
  <!-- <li v-for="(value, key) in object"> -->
          
  	  <!--第三种-->
   <!-- idnex为下标值，0，1，2 ...  -->
  <!-- <li v-for="(value, key, index) in object"> -->
          
      {{ value }}
      </li>
    </ul>
  </div>
   
  <script>
  new Vue({
    el: '#app',
    data: {
      object: {
        name: '百度',
        url: 'http://www.baidu.com',
        slogan: '百度一下，你就知道！'
      }
    }
  })
  </script>
  

  v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

  <div v-for="item in items" :key="item.id">  {{ item.text }}</div>