Vue.js——ONE（v-指令）

vue基础

前端框架与库的区别？

• jquery库->DOM（操作DOM）+请求

• art-template库->模板引擎

• 框架=全方位功能齐全
  - 简易的DOM体验+发送请求+模板引擎+路由功能

• KFC的世界里，库就是一个小套餐，框架就是全家桶

• 代码是的不同
  1. 一般使用库的代码，是调用某个函数，我们自己把控库的代码
  2. 一般使用框架，其框架在帮我们运行我们编好的代码

   		 框架：初始化自身的一些行为
   		     执行你所编写的代码
   		     释放一些资源
  

Vue.js 优点

1. 体积小

压缩后33k；

2. 更高的运行效率

基于虚拟Dom，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真正的操作DOM，所以叫做虚拟DOM。

3.双向数据绑定

让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上。

4.生态丰富、学习成本低

Vue的使用步骤

1.引包：

<script src="vue.js" type="text/javascript">
</script>

2.启动Vue 通过new Vue(options);

3.配置options选项对象

4.el：'目的地’ tempplate:‘模板’ data：function（）{ return { 要使用的key：数据 } }

5.页面中存在该目的地，目的地字符串描述，同jq方式一样

	<div id="app">
    </div>

	new Vue({
        //el:发生行为的目的地
        el:'#app',
        //template：装载的模板
        template:'<div><h1>大家好 {{text}} </h1></div>',
        //在编写代码过程中要控制好格式
        //动态数据的声明
        data:function() { 
            return {
                text :'Hello Vue!'
            } 
        }
    });

在vue内部运行机制中，需要根据你传递的字符串进行判断，比如：#xxx，.xxx，还是div 元素查找

        el:document.getElementById('app'),
        //更为优化，将元素直接找到，避免了vue来取判断

Vue的文件介绍

1. {{ 表达式 }}
   • 对象 (不要连续三个{{ {name:‘jack’} }})
   • 字符串 {{ ’xxx’ }}
   • 判断后的布尔值 {{ true }}
   • 三元表达式 {{ true?‘是正确’:’错误’ )}
2. 可用于页面中简单粗暴的调试
3. ！！！：必须在data这个函数中返回对象中声明

什么是指令？？

• 在vue中提供了一些对于页面+数据更为方便的操作，这些操作就叫做指令，以v-xxx表示
  • 类似于html页面中的属性 <div v-xxx ></div>
• 比如在angular中 以ng-xxx开头的就叫做指令
• 在vue中 以v-xxx开头的就叫做指令
• 指令中封装了一些DOM行为，## 什么是指令？？结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关DOM操作的绑定

vue中常用的v-指令演示

• v-text 元素的innerText属性，必须是双标签
• v-html 元素的innerHTML
• v-if 判断是否插入这个元素
• v-else-if
• v-else
• v-show 隐藏元素 如果确定要隐藏，会给元素的style加上display：none；

    <div id="app">
    </div>


	 <script src="vue.js" type="text/javascript">
    </script>

    <script type="text/javascript">
	new Vue({
        el:'#app',
        template:`
            <div>
                <span v-text="myText"></span>
                <hr/>
                <span v-html="myHtml"></span>
                <button v-if="isExit">测试v-if</button>
                <!--以下三个指令的使用必须是相邻的DOM元素,中间不能加别的-->
                <button v-if="num==1">测试v-if</button>
                <button v-else-if="num==2">测试v-else-if</button>
                <button v-else>测试v-else</button>
                <hr/>
                <button v-show="isShow">我是v-show</button>
            </div>
        `,
        data:function () {
            return {
                myText:'<h1>我是v-text的值！</h1>',
                myHtml:'<h1>我是v-html的值！</h1>',
                isExit:true,
                // 如果值为false会出现<!---->
                num:3,
                isShow:flase
                //不只隐藏自己的
            }
        }
    });
    
    </script>

• v-bind使用

  • 给元素的属性赋值<div file="{{变量}}“></div>
    • 可以给已经存在的属性赋值 input value
    • 也可以给自定义属性赋值 mydata
  • 语法 在元素上v-bind:属性名=“变量||变量名
  • 简写形式：属性名=”变量名“

  v-bind单向数据流

• v-on的使用

  • 处理自定义原生事件的，给按钮添加click并让使用变量的样式改变
  • 在元素上v-on:原生事件名=”使变量进行操作"
  • 简写形式：@原生事件名="使变量进行操作”

  new Vue({
      el:'#app',
      template:`
          <div>
              <input type="text" v-bind:value="myValue" 
              :file="  'xxx'   " />
              <hr/>
              <button v-on:click=" myValue='abc' ">
              点我改变myValue</button>
              <button @click=" myValue='def' ">
              简写改变myValue</button>
          </div>
              //" ："是绑定属性，   " @ "绑定事件
      `,
      data:function () {
          return {
              myValue:'hhhhhha'
          }
      }
  });
  

  

• v-model 只能给具备value属性的元素进行双向数据绑定（必须使用的是有value属性）

	new Vue({
        el:'#app',
        template:`
            <div>
                <input type="text" v-model="myValue" />
                当用户输入xxxx的时候，显示下面的button
                <button v-show="myValue== 'xxxx' ">用户输入的是xxxx</button>
            </div>
        `,
        data:function () {
            return {
                myValue:'hhhhhha'
            }
        }
    });

v-bind 和 v-model 的区别

• input v-model = "name"
  - 双向数据绑定 页面对于input的value改变，能影响内存中name变量
  - 内存js改变name的值，会影响页面重新渲染最新值
• input ：value="name”
  - 单向数据绑定 内存改变影响页面改变
  v-model：其的改变影响其他 v-bind：其改变不影响其他
  v-bind 就是对属性的简单赋值，当内存中值改变，还是会触发重新渲染

• v-for
  • 基本语法 v-for="item in arr"
  • 对象的操作v-for="item in obj"
  • 如果是数组没有id
    • v-for="(item,index) in arr" :class="index"
  • 各中v-for的属性顺序（了解）
    • 数组 item,index
    • 对象 value,key,index
      ** 1：v-for的使用中，除了item属性，也还有一些辅助属性
      stus：数组：（item，index）in stus
      奇偶数不同样式
      ：class="index%==0？‘red’:‘green’ "
      stus:对象（value,key,index）**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue</title>
    <style>
        .A{
            background-color: rgb(240, 93, 93);
        }
        .B{
            background-color: rgb(75, 238, 238);
        }
    </style>
</head>
<body>
    <div id="app">
    </div>



    <!-- 1.引包 -->
    <script src="vue.js" type="text/javascript">
    </script>

    <script type="text/javascript">
    // v-for
    new Vue({
        el:'#app',
        template:`
        <div>
            <ul>
                <li v-for="item in stus" :class="item.myClass">
                    {{ item.name }}
                </li>
            </ul>
         <hr/>
            <ul>
                <li v-for="(val,key,index) in stus2">
                    val:{{val}}
                    key:{{key}}
                    index:{{index}}
                </li>
            </ul>
        </div>`,
        data:function () {
            return {
                stus:[{name:'张三',myClass:'A'},{name:'李四',myClass:'B'},{name:'王五',myClass:'A'}],
                stus2:{'A':'张三','B':'李四','C':'王五'}
            }
    })

• methods（行为）
  • vue已经把以前this是window或者事件对象的问题搞定了
  • methods和data本身是在同一个对象中的，所以在该对象中可以的通过this随意取
  • this.xxx 取data中的值，this.xxxMethod调methods中的函数

new Vue({
        el:'#app',
        template:`
        <div>
            <h1 v-show="isShow">1</h1>
            <h1 v-show="isShow">2</h1>
            <h1 v-show="isShow">3</h1>
            <h1 v-if="isShow">4</h1>
            <button @click="changeIsShow">点我行为更酷</button>
        </div>
        `,
        data:function () {
            return {
                isShow:true
            }
        },
        //在跟属性中声明methods属性
        methods:{
            //key是函数名，value是函数体
            changeIsShow:function(e) {
                //this 就是data函数return出去的对象
                //vue帮我们处理的this指向，不是事件对象了
                console.log(e.target);
                console.log(this);

                this.isShow = !this.isShow;
            }
        }
    });

渲染组件-父使用子组件

• 1.创建子组件（对象）
  • var Header = { template:'模板' , data是一个函数，methods:功能，components:子组件们 }
• 2.在父组件中声明，根属性components:{ 组件名：组件对象 }
• 3.在父组件要用的地方使用<组件名></组件名>
  • 在不同框架中，有的不支持大写字母，用的时候
    • 组件名 MyHeader
    • 使用 my-header
• 总结：有父，生子，声明，使用
  

父向子传递数据

var Son = {
        template:`
            <div>
                接收到的父组件数据是：{{ title }}
                <h1>1</h1>
                <h1>2</h1>
                <ul>
                    <li></li>
                </ul>
                <button>改变现实</button>
            </div>
        `,
        //声明接受参数
        props:['title'],
    }
    //其实 父向子传递，就是v-bind给元素的属性赋值
    var App = {
        components:{
            son:Son
        },
        template:`<div>
            // <son :title="xxx"></son>
            <son title="hello"></son>
        </div>`,
        data:function () {
            return  {    xxx:'我是xxx数据'    }
        }
    };
    new Vue({
        // data就不在这个组件对象中写了（启动组件）
        el:'#app',
        //声明组件
        components:{
            app:App
        },
        template:'<app/>'
    });

v-model 和 v-bind 的一个小比较吧

var Son = {
        template:`
            <div>
            单向数据流(vue->html):
            <input type="text" :value="text"/><br/>
            双向数据流(vue->html->vue):
            <input type="text" v-model="text"/><br/>
            <h1>主要看这里：☟☟☟☟☟☟☟☟</h1>
            {{ text }}
            </div>
        `,
        data:function() {
            return {
                xxx:true,
                text:'hello'
            }
        },
    }
    //其实 父向子传递，就是v-bind给元素的属性赋值
    var App = {
        components:{
            son:Son
        },
        template:`<div>
            <son></son>
        </div>`
    };
    new Vue({
        // data就不在这个组件对象中写了（启动组件）
        el:'#app',
        //声明组件
        components:{
            app:App
        },
        template:'<app/>'
    });