vue入门（01）

一、VUE初体验

const  定义常量  let 定义变量能够改变

列表展示：

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    let  app = new Vue({
        el: '#app',
        data: {
            message: '你好',
            movies: ['海王','星际穿越','大话西游','盗梦空间']
        }
    })
</script>
</body>
</html>

计数器展示：

<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            counter: 0
        },
        methods:{
            add: function () {
                console.log('add被执行了');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行了');
                this.counter--
            }
        }
    })
</script>

二、MVVM

 Model ：视图层

ViewModel：视图模型层

Model：数据层

三、声明周期

定义：事务从诞生到消亡的一个整个过程

 

代码规范：2空格

mustache语法  {{}}

四、常用命令

1、插值语法

v-once：只显示第一次，更改js对象值不会变，界面变也会变

v-html：能直接解析html格式的文件

v-text：接受一个string类型，和mustache比较相似，都能显示在界面中

v-pre：原封不动的显示信息，不做任何解析

v-cloak：js代码加载慢，可能会显示{{}}信息，这时候可以用此影藏它的显示

v-bind：动态绑定属性   语法糖简写为  ：

<div id="app">
<!--  <h2 class="title" :class="[active,line]">{{message}}</h2>-->
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message: '你好啊',
        active: 'aaaaa',
        line: 'bbbbb'
    },
    methods: {
        getClasses: function () {
          return [this.isActive,this.line]
        }
    }
  })
</script>

v-bind：绑定style

对象语法和数组语法

<div id="app">
<!--  <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--  <h2 :style="{fontSize: '50px'}">{{message}}</h2>-->
  <h2 :style="{fontSize: finalSize + 'px',color: finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message: '你好啊',
        finalSize: 100,
        finalColor: 'red'
    }
  })
</script>

<div id="app">
  <h2 :style="[baseStyle,basestyle1]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message: '你好啊',
        baseStyle: {backgroundColor: 'red'},
        baseStyle1: {fontSize: '100px'}
    }
  })
</script>

2、计算语法

<div id="app">
<!--  <h2>{{firstName + ' ' + lastName}}</h2>-->
  <h2>{{getFullName()}}</h2>
  <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message: '你好啊',
        firstName: 'Lebron',
        lastName: 'James'
    },
    //计算属性
    computed: {
        fullName: function () {
          return this.firstName + ' ' +this.lastName
        }
    },
    methods:{
        getFullName() {
          return this.firstName + ' ' + this.lastName
        }
    }
  })
</script>

计算属性的复杂案列：

<div id="app">
  总价为{{totalPrice}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          message: '你好啊',
        books:[
          {id: 100,name: 'Unix编程艺术',price: 119},
          {id: 102,name: '代码大全',price: 134},
          {id: 102,name: '并发编程艺术',price: 134},
          {id: 144,name: 'Unix编程艺术',price: 120},
        ]
    },
    computed: {
        totalPrice: function () {
          let index = 0
          for (let i = 0; i < this.books.length; i++){
            index += this.books[i].price
          }
          return index
          
          // for (let i in this.books){
          //   this.books[i]
          // }
          // for ( let book of this.books){
          //  
          // }
        }
    }
  })
</script>