zoukankan      html  css  js  c++  java
  • vue教程(一)-html使用vue

    前后端分离、微服务框架是当下比较流行的词汇,而vue就是前端框架的佼佼者。下面重点介绍一下vue的用法:

    vue起步:1、引包    2、启动new Vue({el:目的地,template:模板内容})  其中options参数除了 el、template还有数据data

         在html中如何使用vue:

          按照上述步骤, 引包   <script src='./node_modules/vue/dist/vue.js'></script>

          new Vue对象  <script>

                  new Vue({

                    el:"#app",//预留填坑位置,比如html页面有一个<div id='app'></div>的元素

                    tempate:"<div>你好</div>"

                  })

                  </script>

          完成上述后,访问该html页面可以看到你好内容。 data:动态数据的声明  用法如下:添加data

                <script>

                  new Vue({

                    el:"#app",//预留填坑位置,比如html页面有一个<div id='app'></div>的元素

                    template:"<div>你好 {{text}}</div>",

                    data:function(){

                      return {

                        //代表要在template使用的数据,所以在template中将text变量添加进去,用{{}}包裹

                        text:'hellow word'

                      }

                    }

                  })

                  </script>

            保存之后,访问html页面,可看到内容 你好 hellow word

    vue文件介绍

    1、插值表达式:格式{{表达式}}

    支持字符串{{''}}、对象{{object.key}}、判断后的布尔值{{true}}、三元表达式{{a==b?'正确':'错误'}}

    注:必须在data这个函数返回对象中声明

    2、常用指令

    v-text其实就是给元素的innerText属性赋值,只能用在双标签中

    v-html就是给元素的innerHTml赋值、

    v-ifv-if-elsev-else、

    v-show隐藏元素,就是将display:none

    v-bind给元素属性赋值,语法:<div v-bind:属性名='变量'></div>,  简写 <div :属性名='变量'></div>  

    v-on 处理原生事件的 。用法:在元素上v-on:原生事件名=“操作方法” , 简写:@原生事件名=“操作方法”

    v-model 双向数据流绑定,即页面改变影响内存,内存数据改变影响页面。 

    v-model与v-bind区别:

    1、v-bind的是单向的,只能将vue中的数据同步到页面。

    2、v-model 双向绑定,不只能将vue中的数据同步到页面,而且可以将用户数据的数据赋值给vue中的属性。例子:<input v-model='myValue'></input>  <button v-show='myValue=='xxx'>按钮</button>,new vue中默认myValue='hellow',如果刷新html页面,这时候input的默认值是hellow,说明vue的属性值成功同步到页面,当输入xxx时,按钮能够显现,说明用户输入的值能够赋值给vue的属性,所以是双向绑定。

    3、v-bind可以给任何属性赋值,v-model只能给具备value属性的元素进行数据双向绑定。

    v-for的用法

    基本用法v-for="item in array"

    对象用法v-for="item in object"

    v-for 中的属性 数组 item index  ,对象 item 、key、index

    3、组件的用法

    在new Value中使用components声明要用的组件,key是组件值,value是组件对象

    <script>

    var APP = {template:"<h>我是入口组件</h>"}  -----------生出子

    new Vue({

      el:"#app",

      template:"<app/>",//组件调用   ---------------使用子

      components:{app:APP} ---------------------声明子

    }) 

    </script>

    //访问页面后,可以看到我是入口组件 这个显示内容,说明组件调用成功。 口诀: 生出子、 声明子、使用子

    使用组件以单标签(<app/>)使用,只能在new Vue中可以,如果在其他地方请使用双标签,比如将上述例子中的APP组件再调用其他组件时,必须用双标签如下

    var myHeader ={template:<h>我是头</h>"}

    var myBody ={template:<h>我是主要内容</h>"}

    var APP = {

    components:{'my-header':myHeader ,'my-body':myBody } ,

    template:"<div>

          <my-header></my-header>  -----------在这使用时,必须双标签,而不能是<my-header/>

          <my-body></my-body>

        </div>"

    }  

    //访问页面可以看到 我是头  我是主要内容的显示,说明调用成功。

    组件之间传递数据

    父向子传递数据 其实就是给子使用v-bind绑定数据

    var APP = {

    components:{'my-header':myHeader  } ,

    template:"<div>

          <my-header :title='title' ></my-header>  -----------v-bind绑定数据

        </div>",

    data:function(){

    return {

    title:'测试'

    }

    }

    子组件的修改如下: 利用props接收父组件传递过来的参数

    var myHeader ={

      template:<h>我是头 {{title}}</h>",

      props:['title']

    }

    //访问页面可以看到 “我石头 测试”内容显示

    简单介绍一下vue的最基本用法,后期会继续完善文章。本人使用vuempvup+vant等组件开发的项目作为例子,有兴趣的可以下载学习。源代码已上传git:Git地址

     技术交流群:①群:699050440     ②群:824313640

  • 相关阅读:
    BestCoder6 1002 Goffi and Squary Partition(hdu 4982) 解题报告
    codeforces 31C Schedule 解题报告
    codeforces 462C Appleman and Toastman 解题报告
    codeforces 460C. Present 解题报告
    BestCoder3 1002 BestCoder Sequence(hdu 4908) 解题报告
    BestCoder3 1001 Task schedule(hdu 4907) 解题报告
    poj 1195 Mobile phones 解题报告
    二维树状数组 探索进行中
    codeforces 460B Little Dima and Equation 解题报告
    通过Sql语句控制SQLite数据库增删改查
  • 原文地址:https://www.cnblogs.com/fatpig-wf/p/11243169.html
Copyright © 2011-2022 走看看