Vue初级_01

历史介绍

angular 09年,年份较早,一开始大家是拒绝 star 33.4k
react 2013年,用户体验好,知道拉到一堆粉丝 star:89k
Vue 2014年,用户体验好, star:84.6k

前端框架与库的区别?

jQuery:->DOM(操作DOM)+请求
art-template->模板引擎
框架=全方位功能齐全

简易的DOM体验+发请求+模板引擎+路由功能

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

代码上不同

一般使用库的代码,是调用某个函数,我们自己把控库的代码

一般使用框架,其框架在帮我们运行我们编写好的代码

Vue起步

1.引包
2.启动new Vue(el:目的地,template:模板内容);
options(目的地:el,内容:template,数据:data)

插值表达式

{{表达式}}

对象(不要连续3个{{{name:'Jack'} }})

字符串{{'xxx'}}

判断后的布尔值{{true}}

三元表达式{{true?正确:错误}}

可以用于页面中简单粗暴的调试
注意:必须在data这个函数中返回的对象中声明

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue起步</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 引包 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 通过Vue对象去new Vue(options) -->
    <script>
      //启动Vue
      new Vue({
        // el:发生行为的目的地
        el:document.getElementById('app'),
        //el:'#app',
        //template:装载的模板
        template:'<div><h1>大家好 {{text}}</h1></div>',
        //动态数据的声明
        data:function(){  //也可以使用对象,不用太在意
          return{
            //template中要使用的数据
            text:'hello vue'
          }
        }
      });
    </script>
  </body>
</html>

什么是指令

在Vue中提供了一些对于页面+数据的更为方便的操作,这些操作就叫指令,类似HTML页面中的属性
比如在angular中以ng-xxx开头的就叫指令
在Vue中以v-xxx开头的就叫指令
指令中封装了一些DOM行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定

Vue的常用指令

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

v-bind使用

给元素的属性赋值.可以给已经存在的属性赋值,也可以给自定义属性赋值
语法在元素上,v-bind:属性名="常量||变量名"
简写形式 :属性="变量名"

v-on的使用

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

v-model

双向数据流(绑定):页面改变影响内存(js),内存(js)改变影响大小

v-bind和v-model的区别

v-bind可以给任何属性赋值,是从Vue到页面的单向数据流
v-model只能给具备value属性的元素进行双向数据绑定(必须使用的是有value属性的元素)

v-for的使用

基本语法:v-for="item in arr"
对象的操作:v-for="item in obj"
如果是数组没有id:v-for="(item,index) in arr" :class="index" 奇偶数不同样式 :class="index%2==0?'red':'green'"

关于对象内的this

Vue已经把以前this是window或者时间对象的问题搞定了
methods和data本身是在同一个对象中的,所以该对象可以通过this随意取
this.xxx取data中的值,this.xxxMethod调methods中的函数

<!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>Document</title>
    <style>
    .a{
        background-color: red;
    }
    .b{
        background-color:green;
    }
    .c{
        background-color:blue;
    }
    </style>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            template:`
                <div>
                    <h1 v-text="myText"></h1>
                    <hr>
                    <span v-html="myHtml"></span>
                    <!-- 以下的三个指令的使用，必须是相邻的DOM元素-->
                    <h1>v-if的使用</h1>
                    <button v-if="num==1">测试v-if</button>
                    <button v-else-if="num==2">测试v-else-if</button>
                    <button v-else>测试v-else</button>
                    <h1>v-show的使用</h1>
                    <button v-show="isShow">我是v-show</button>
                    <hr>
                    <input type="text" v-bind:value="myValue" :file=" 'xxx' ">
                    <h1>单向数据绑定v-bind</h1>
                    <button v-on:click=" myValue='abc'">点我改变value</button>
                    <button @click=" myValue='123'">简写:点我改变value</button>
                    <h1>双向数据绑定v-model</h1>
                    <input type="text" v-model="myValue">
                    <!--当用户输入xxx的时候,显示下面的button-->
                    <button v-show="myValue=='xxx'">用户输入的是xxx</button>
                    <h1>v-for的使用</h1>
                    <ul>
                        <li v-for="item in stus" :class="item.score"  >
                            {{item.name}}
                        </li>
                    </ul>
                    <ul>
                        <li v-for="(val,key,index) in stus2" :class="index%2==0?'a':'b'">
                            val:{{val}}
                            key:{{key}}
                            index:{{index}}
                        </li>
                    </ul>
                    <h1>methods的使用</h1>
                    <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{
                    myText:'我是v-text的值',
                    myHtml:'<h1>我是一个HTML</h1>',
                    isExit:true,
                    num:3,
                    isShow:true,
                    myValue:'asfjdoaihf',
                    stus:[
                        {name:'张三',score:'a'},
                        {name:'李四',score:'b'},
                        {name:'王五',score:'c'}
                        ],
                    stus2:{'A':'张三','B':'李四','C':'王五',}
                }
            },
            //key是函数名,value是函数体
            methods:{
                changeIsShow:function(){
                    //this就是data函数return出去的对象
                    //vue帮我们处理的this指向,不是事件对象了
                    this.isShow=!this.isShow;
                }
            }
        });
    </script>
</body>
</html>

渲染组件--父使用子组件

1.创建子组件(对象)
2.在父组件中声明,根属性components:{组件名:组件对象}
3.在父组件要用的地方使用<组件名></组件名>

在不同的框架中,有的不支持大写字母,用的时候

组件名:MyHeader

使用:my-header

<!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>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>

    
    
    var myHeader={
        template:`<div>我是头部</div>`
    };
    //函数调用的方式创建组件
    var myBody=Vue.extend({
        template:`<div>我是函数调用的方式创建的组件</div>`
    });
    // var myBody={
    //     template:`<div>我是中部</div>`
    // };
    var myFooter={
        template:`
            <div>我是底部
                <button @click="showNum(123)">点我</button>
            </div>
            
            `,
        methods:{
            showNum:function(num){
                alert(num);
            }
        },
        
    };
    //声明入口组件
    var App={
        components:{
            'my-header':myHeader,
            'my-body':myBody,
            'my-footer':myFooter
        },
        template:`
            <div>
                <my-header></my-header>
                <my-body></my-body>
                <my-footer></my-footer>
            </div>
        `
    };
    new Vue({
        el:'#app',
        components:{//声明要用的组件们
        //key是组件名,value是组件对象
        app:App

        },
        //只有在new Vue中,可以使用单标签
        template:'<app/>', //入口组件
    });
    </script>
</body>
</html>

父子组件传值(父传子)

1.父用子的时候通过属性传递
2.子要声明props:['属性名']来接收
3.收到就是自己的了,随便你用(在template中直接用,在js中this.属性名用)
补充:常量传递直接用,变量传递加冒号

<!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>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        var Son={
            template:`
                <div>
                    <!--3-->
                    接收到父组件的数据是:{{title}}
                    <h1 v-if="xxx">1</h1>
                    <h1 v-show="xxx">2</h1>
                    <ul>
                        <li v-for="stu in ['张三','李四']">
                            {{stu}}
                        </li>
                    </ul>
                    <button @click="changeXXX">改变显示</button>
                    <hr/>
                    单向数据流(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'
                }
            },
            methods:{
                changeXXX:function(){
                    this.xxx=!this.xxx;
                }
            },
            //2.声明接收参数:
            props:['title']
        };
        //其实父向子传递,就是v-bind给元素的属性赋值
        var App={
            components:{
                son:Son
            },
            //1
            template:`
                <div>
                    <son :title="xxx"></son>
                </div>
            `,
            data:function(){
                return {
                    xxx:'我是xxx数据'
                }
            }
        };
        new Vue({
            //data就不在这个组件对象中写了(启动组件)
            el:'#app',
            components:{
                app:App
            },
            template:`<app/>`
        });
    </script>
</body>
</html>

猜你喜欢