vue01-上

时间 2019-11-20

标签 vue01 vue 繁體版

原文原文链接

------------------------VUE-------------------------------------------------php

官网：https://cn.vuejs.org
    API：https://cn.vuejs.org/v2/api/

    小 -> 大
    封装(函数)->多个封装(文件)==库||框架
                    ↓               ↓
                   插件               插件

                   模块(文件)  分类（目录)->包
    框架：改变了编码思想   VUE: 数据驱动，一切都是数据,面向数据
        面向  事件
        面向  对象
        面向  数据
    库:  工具自己不改变编码的方式
        jquery -> dom       事件驱动

    MVC：html页面里面会出现<%=后台属性%>  {$后台属性$} {{后台属性}} mustache
        一个思想、是后端产物,是为了先后端分离
        1. 后台 java(jsp+html)  php(php+html+js)  nodejs(nodejs+ejs)
        2. 前台 (html+css+js)
        3. 编辑 (拿着后台给他开发的后台管理页面xxx.com:8008/admin.php)
        4. 设计

    前端MVC(分离js)：   数据、表现、业务分离
        model       M  数据  ajax/jsonp/数据解析  能够复用
            | xx.js
            ...
        view        V  视图表现层 展现数据、建立元素，变色，运动 能够复用
            ...
        control     C  控制层(串业务,事件驱动)  通常不复用
            ...

        function readBaidu(str,callback){..拿着需求str,求数据，调用回调带数据出去.}
        function writeLi(data,callback){...拿着数据写页面}
        window.onload=function(){
            oBtn.onclick=function(){
                readBaidu('xxx',function(res){
                    writeLi(res);
                    winObj.close()
                })
            }
        }
    VUE: 是个M V VM框架
        MVC:衍生出不少变体  MVP MVVM MV*
        mv  vm~C
        MVVM M  <-> VM <-> V

    基本使用：
        new出来一个Vue的实例，传一堆配置参数，控制一片html

        VM:     响应系统 - > vDOM作标记 ->一个循环周期结束后->操做DOM
            new Vue   返回  VM
            new Vue({
                el:'选择器'  要控制的那片html代码
                data:{key:value}数据
                methods:{fnName:fn} 方法
            })
        M:  初始化数据
            data 选项   number/string/boolean/array/json/undefined/null
        V:  数据绑定
            {{数据名}} 模板 mustche  插值表达式
            v-text="数据名"        vue特有的属性(指令)
            v-html="strong"     非转义输出
            v-for="(val,index) in 数据"       val值  index索引   变量数组、对象
                key="bmw"  指定key 是个bmw字符 vue是认得 修改VDom的key值
                :key="item.id"  指定key 是数据id（惟一性） 修改VDom的key值
            v-bind:html属性="数据"  普通的html属性绑定数据
                :html属性="数据"  简写   title/src/url/.....
            事件：
                v-on:事件名="方法"

>vue基本使用
一、data专门放数据（M）
实例经过控制el元素来控制body页面其中$叫实例系统属性或方法，不带的是自定义的实例属性。
this指向实例，便可以经过this找到实例内的内容。
响应式渲染，但是实时更改内容
（在控制台打印vm.title=''）

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

<body>
  <!-- V -->
  <div id="app">
    <!-- mustach语法 -->
    <h3>{{ title }}</h3>
    <p>{{ dp }}</p>
    <p>{{title}}</p>
  </div>

  <script>
    let vm = new Vue({
      // 选项
      // el:'选择器',
      el:'#app',
      data:{//M
        title:'标题',
        dp:'段落'
      }
    });
  </script>
  
</body>

m层的数据类型css

二、m层数据类型在渲染时有什么影响
①undefined到了页面不显示
    ②arr和json都转字符串
    ③布尔仍然是布尔值
    ④数值仍为数值

<body>

  <!-- V -->
  <div id="app">
    <!-- mustach语法 -->

    <div>{{ num }}</div>
    <div>{{ arr }}</div>
    <div>{{ json }}</div>
    <div>{{ un }}</div>
    <div>{{ nu }}</div>
    <div>/{{ str }}/</div>
    <div>{{ bl }}</div>

    <hr>

    <div>/{{str2}}/</div>

  </div>

  <script>
    let vm = new Vue({
      // 选项
      // el:'选择器',
      el:'#app',
      data:{//M   初始化数据的地方
        title:'标题',
        num:110,
        arr:['aa','bb','cc'], //[ "aa", "bb", "cc" ]
        json:{a:1,b:2},       //{“a”：1，“b”：2}
        un:undefined,
        nu:null,
        str:'',
        bl:true,
        str2:'   '            //  /  /
      }
    });
    
  </script>
  
</body>

数据绑定html

三、数据绑定的形式
①指令：特殊的html自定义属性
<div v-text='txt'></div>
②mustach
{{ }}
③属性绑定1：html的属性值动态化
例子：<img :src="src">
④属性绑定2属性名动态化
  <!-- V -->
  <div id="app">
    
    <h3>数据绑定的形式</h3>

    <h4>mustach:出如今开始和接受标签之间</h4>
    <div>{{ title }}</div>

    <hr>

    <h4>指令: 特殊的html自定义属性</h4>
    <!-- <div v-text="数据/实例属性"></div> -->
    <div v-text="txt"></div>

    <hr>

    <h4>属性绑定: html的属性值动态化</h4>
    <img :src="src" alt="">

    <h4>属性绑定2: 属性名动态化</h4>
    <img src="https://cn.vuejs.org/images/logo.png" v-bind:[propimg]="val1">



  </div>

  <script>
    let vm = new Vue({
      // 选项
      // el:'选择器',
      el:'#app',
      data:{//M   初始化数据的地方
        title:'标题',
        txt:'沙发斯蒂芬',
        src: 'https://cn.vuejs.org/images/logo.png',
        propimg: 'title',
        val1:'呵呵哒'
      }
    });
    
  </script>
  
</body>

列表渲染前端

<body>

  <!-- V -->
  <div id="app">
    
    <h3>列表渲染</h3>
    <!-- 指令：里面能够给语句 -->
    <ul>
      <!-- <li v-for="val in arr">{{ val }}</li> -->
      <li v-for="val of arr">{{ val }}</li>
    </ul>

    <hr>
    
    <ul>
      <li v-for="item of arr2">
        <!-- 插值表达式 -->
        <p>姓名: {{ item.name }}</p>
        <p>地址: {{ item.address}}</p>
      </li>
    </ul>

    <hr>

    <ul>
      <li v-for="item of arr3">
        {{item.name}}/{{item.address}}
        <ul>
          <li v-for="item of item.children">
            {{item.name}}/{{item.address}}
          </li>
        </ul>
      </li>
    </ul>

  </div>

  <script>
    let vm = new Vue({
      // 选项
      // el:'选择器',
      el:'#app',
      data:{//M   初始化数据的地方
        arr:['aa','bb','cc'],
        arr2:[
          {id:1,name:'alex',address:'外滩18号'},
          {id:2,name:'alex2',address:'外滩1号'},
          {id:4,name:'alex3'},
        ],
        arr3:[
          {id:1,name:'alex',address:'外滩18号',children:[
            {id:1,name:'ooo',address:'霞飞路1号'},
            {id:1,name:'ooo2',address:'霞飞路11号'},
          ]},
          {id:2,name:'alex2',address:'外滩1号'},
          {id:4,name:'alex3'},
        ]
      
      }
    });
    
  </script>
  
</body>

绑定事件
```vue

<h4>事件绑定</h4>

<div>{{num}}</div>
<div v-show="bl">box</div>

<!-- <input type="button" value="按钮" v-on:原生js事件名="函数"> -->
<!-- <input type="button" value="按钮" v-on:touchstart="函数"> -->
<!-- <input type="button" value="按钮" v-on:click="show1"> -->

<!-- 简写 -->
<!-- <input type="button" value="按钮" @原生js事件名="函数"> -->
<input type="button" value="按钮" @click="show1">

```java