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/>'
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值