Vue复习一

1.前端工作:

• 官网: 简洁 展示数据

• app：HTML5 展示数据 原生app(安卓 ios)

• 后台管理系统: 创建数据

• 活动页:要求不是特别高

• 小程序

2.Vue介绍

      官网:https://cn.vuejs.org/

      渐进式:根据功能需求逐次添加模块

3.Vue特点:

     易用，高效，灵活

4.Vue核心:

      组件化

      数据驱动

5.Vue缺点：

    1.个人维护

6.安装:

     开发环境:自己电脑的环境

     生产环境:线上环境 -->测试环境(与生产环境一致)

7.使用:

•    首先引入:3种方式

<!-- 1.引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 2.引入 -->
<!-- <script src="./vue.js"></script> -->
<!-- 3.node安装 -->
<!-- <script src="./node_modules/vue/dist/vue.min.js"></script> -->

• 创建元素

<div id="app">
        <!-- {{}} 胡子语法 -->
       <div>{{msg}}</div>
        <p v-html='msg'></p>
</div>

• 实例化

let vm = new Vue({
        // element  挂载app
        el:'#app',
        data:{
            // 需要往页面渲染的所有数据都需要在data中声明
            msg:'hello world!',
            content:'梦寻千古醉'
        }
    })

8.解决闪烁问题

• 给id=‘app'增加v-cloak属性，通过设置样式来解决闪烁

<div id="app" v-cloak>
 </div>
  <style>
        /* 属性选择器 */
        [v-cloak]{
            display: none;
        }
    </style>

• 通过指令的方式

 <p v-html='msg'></p>  v-html叫做指令

9.指令

• v-html
• v-text

     区别：v-html可以识别标签 v-text 不可以识别标签

• v-if     v-if 后面可以跟表达式，0，null，undefined，NAN，false 为假的    v-if 后面跟三元表达式 根据最终结果来判断
• v-if  v-else      之间不能添加任何内容
• v-else-if
• v-show

     v-if  v-show区别：v-if 移除元素，偶尔使用 v-show:设置display属性 频繁切换

• v-for

数组:
 <div v-for='(item,index) in arr'>{{item}}------{{index}}</div>
对象:
<p v-for='(item,key,index) in obj'>{{item}}------{{key}}---{{index}}</p>

• v-bind

v-bind:src 绑定属性  简写:
<!-- v-bind:绑定属性 不仅可以绑定已经存在的属性，还可以绑定自定义属性 -->
<a v-bind:href="url" v-bind:aa='aa'>点击跳转</a>
注意:绑定属性均需要在data中声明

• v-on

v-on:click 简写@
  <button v-on:click='alert()'>点击弹出</button>
  在与data同级声明一个methods对象
   methods:{
     // v-on:click  简写方式为@click  同时方法名如果不需要传参，那么小括号可以省略，如果需要传参务必带括号
    // ES6写法
            alert(){
                alert(456)
            }
            // alert:function(){
            //     alert(123)
            // }
       

• v-model

v-model：双向数据绑定
 // 双向数据绑定只能应用于表单元素
 // 模型可以控制视图，视图可以修改模型  M（model）V(view) VM(viewModel)控制器 
 // MVVM设计模式:擅长做数据的增删改查  不擅长做动画和操作DOM   vue
 // MVC 设计模式: M(model) V（view） C(control)控制器 react 
 
 <div id="app">
     <!-- 视图 -->
     <input type="text" v-model='msg'>
     {{msg}}
 </div>
    
    data: {
    // 模型
    msg:'hello world'
    }