Vue基础入门，多一点不说，少一点不行

Vue

• Vue基础概念

  Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

• Vue快速入门

  • 新建HTML页面，引入Vue.js文件

    <script src="js/vue.js"></script>

  • 在JS代码区域，创建Vue核心对象，定义数据类型

    <script>
        new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
    </script>
    
    //$mount(#app) 等同于 el:"#app"，都表示挂靠在#app区域
    <script>
    	new Vue({
        data:{
            message:"Hello Vue!"
        }
    }).$mount(#app)
    </script>

  • 编写视图

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

    

  • 插值表达式

    • 形式：{{表达式}}

    • 内容：变量、三元运算符、函数调用、算术运算

• Vue常用指令

  • 指令：

    HTML标签上带有 -v 前缀的特殊属性，不同的指令具有不同的含义

  • 常用指令

    • v-bind——为HTML标签绑定属性，如href、css等

      <a v-bind:href="url">好好学习</a>
      //简写
      <a :href="url">好好学习</a>

    • v-model——为表单元素上创建双向数据绑定

      <input type="text" v-model="url">

      

    • v-on——为HTML标签绑定事件

      

    • v-if

    • v-else-if

    • v-else——条件性渲染某元素，判定为true渲染，false不渲染

    • v-show——根据条件展示某元素，区别在于切换display属性的值

      

    • v-for——列表渲染，遍历容器的元素或对象的属性

      <div v-for="addr in addrs">{{addr}}</dir>
      ​
      //addr代表遍历参数，index代表遍历索引
      <dir v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</dirs>

• Vue生命周期

  • 生命周期的八个阶段

    每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

    • beforeCreate——创建前

    • created——创建后

    • beforeMount——载入前

    • mounted——挂载完成（发送请求到服务端，加载数据）

    • beforeMount——更新前

    • update——更新后

    • beforeDestroy——销毁前

    • destroyed——销毁后

Vue项目-目录结构

• 基于Vue脚手架创建出来的工程，有标准目录结构

Vue组件库Element

饿了么团队开发，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面组件库。组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等

• 快速入门

  • 安装ElementUI组件库：在当前工程的目录下，在命令执行指令

    npm install element-ui@2.15.3

    

  • 引入ElementUI组件库

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    ​
    Vue.use(ElementUI);

    

 

且将新旧试新茶 诗歌趁年华