Vue随笔（一）

初识Vue

1、vuejs -----渐进式框架

• Vue是目前最火的一个框架,也是主流框架之一，是一套构建用户界面的框架，只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。
• 可复用组件
• 前端路由技术
• 状态管理
• 虚拟DOM

2、vue.js安装

• 直接引用 cdn–项目发布后常用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 下载和引入—学习阶段
• npm安装

 npm install vue

3、vue初体验

(1)插值操作

<div id="root">
  	<p>{{message}}</p>
    <h4>我是{{name}}</h4>
    <input type="text" v-model="message">
</div>
<script>
// let(es6定义的变量关键字)/const(es6定义的常量关键字)
   var app=new Vue({
       el:"#root",  //用于挂载要管理的元素
       data:{  //定义数据
           message:"google",
           name:'kiki'
       }
   })
</script>

(2)列表视图

<div id="app2">
  <ul>
      <li v-for="item in movies">{{item}}</li>
  </ul>
</div>
<script>
   let app=new Vue({
       el:"#app2",
       data:{
           message:"你好啊",
           movies:["大话西游","名侦探柯南","星际穿越","盗梦空间"]
       }
   })
</script>

(3)计数器

• v-on ：事件监听 语法糖：@
• v-for : 遍历
• v-model：双向绑定

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

4、MVVM : Model View ViewModel

5、vue的option选项

• el:string | htmlElement
  作用：决定vue会管理哪个dom
• data : object | function(组件当中data必须是一个函数)
  作用：vue实例对应的数据对象
• methods : 各种方法
• computed : 计算属性
• watch ：侦听器
• filter : 过滤器
• 生命周期函数：created(),mounted(),updated()…
• components:组件
• （后续补充…）

6、Vue的生命周期