zoukankan      html  css  js  c++  java
  • Vue基础

    1、采用cnd方式来使用vue。

    html:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Vue</title>
     6     <link rel="stylesheet" type="text/css" href="style.css">
     7     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
     8 </head>
     9 <body >
    10 <div id="vue-app">
    11     <h1>{{greet('night')}}</h1>
    12     <h1>{{name}}</h1>
    13     <div  v-bind:class="classtag">绑定属性</div>
    14     <input type="text" v-bind:value="value">
    15     <p v-html="website">
    16     </p>
    17 </div>
    18 <div id="ev_bind">
    19     <button @click="add">增加商品</button>
    20     <button v-on:click="del">减少商品</button>
    21     <button v-on:dblclick="add">双击增加</button>
    22     <button v-on:dblclick="del">双击减少</button>
    23     <p>目前购物车商品个数:{{shop}}</p>
    24     <div v-bind:class="ok" v-on:mousemove="deal">{{x}},{{y}}</div>
    25 </div>
    26 
    27 <div id="ke_ev">
    28     <input v-on:keyup.enter="KeyUp" placeholder="回车alter" />
    29 </div>
    30 <div id="data_bind">
    31     <h1>双向数据绑定</h1>
    32     name:<input type="text" name="" v-model="name"><span>{{name}}</span>
    33     age:<input type="text" v-model="age" /> <span>{{age}}</span>
    34 </div>
    35 <hr>
    36 <div id="compute_test">
    37     <button v-on:click="a++">点击增加a</button>
    38     <button @click="b++">点击增加b</button>
    39     <p>a is : {{a}}</p>
    40     <p>b is : {{b}}</p>
    41     <p>Add age  to A={{addToA}}</p>
    42     <p>Add age  to B={{addToB}}</p>
    43 </div>
    44 <div id="css_bind">
    45     <h1 v-bind:class="addCls">示例1</h1>
    46 </div>
    47 <div id="arr_bind">
    48     <h1 v-bind:class="[active,error]">示例2<h2>
    49 </div>
    50 <div id="three_bind">
    51     <h1 v-bind:class="error!=''?active:''">示例三</h1>
    52 </div>
    53 <div id="if-bind">
    54     <h1>if 条件判断</h1>
    55     <template v-if="flag">
    56         <h1>条件成立</h1>
    57     </template>
    58     <template v-else>
    59         <h5>条件不成立</h5>
    60     </template>
    61 </div>
    62 <div id="for_bind">
    63     <h1 v-bind:style="{background:sys}">for循环</h1>
    64     <ul>
    65         <template v-for="(p,index) in person" v-if="p">
    66             <li>{{index}}----{{p}}</li>
    67         </template>
    68     </ul>
    69     <ul>
    70         <template v-for='(v,i) in fav'>
    71             <li>{{v.name}}---{{v.age}}</li>
    72             
    73         </template>
    74     </ul>
    75 </div>
    76 <hr>
    77 <h1>Vue多实例</h1>
    78 <div id="app_one">
    79     <h4>{{title}}</h4>
    80 </div>
    81 <div id="app_two">
    82     <h4>{{title}}</h4>
    83     <button v-on:click="Ch aneTitle">点击修改app_one title</button>
    84 </div>
    85 <div id="com_bind">
    86     <h1>组件使用:</h1>
    87     <com_con></com_con>
    88 </div>
    89 <script type="text/javascript" src="app.js"></script>
    90 </body>
    91 </html>

    js注释和解释:

      1 // 创建vue对象。
      2 new Vue({
      3     el:"#vue-app",
      4     data:{
      5         name:"米斯特刘",
      6         classtag:"primary",
      7         value:'ok',
      8         website:"<a href='www.baidu.com'>个人网站</a>"
      9     },
     10     methods:{
     11         greet:function (time) {
     12             // body...
     13             return "good"+time+' '+this.name+"!"
     14         }
     15     }
     16 })
     17 // el:是该Vue对象作用的dom根容器的对象。绑定vue对象数据的使用范围,除了这个范围无法使用。
     18 // data:是数据绑定。{{}} 是引用vue对象数据的模板语言。也可以是单个表达式,这里不能流控制,需要使用三元表达式。
     19 // methods:vue对象绑定函数的关键字。也是key vlaue形式。value后面跟的是匿名函数。前端调用直接函数名字()形式,如果想引用vue对象的data中的属性值,我们可以使用this.属性名字(在vue中
     20 // 我们不用this.data.属性名,直接是this.属性名字)
     21 // v-bind:属性名字="data中的key" ---->绑定属性。缩写为:
     22 // v-html="data中的属性key"---->绑定标签。
     23 // 绑定事件,使用v-on:事件名称="函数()"其中括号可以省略,在vue中默认情况下,事件后面是函数。在属性调用的时候,需要区别属性名称和函数,所以函数需要带有括号。而事件默认就是函数。可以不带括号。
     24 // 单击事件:click 双击事件:dblclick 鼠标移动:mousemove....js中的时间都支持。
     25 //@事件名称 也是绑定事件的一种方法。是v-on的缩写。
     26 new Vue({
     27     el:"#ev_bind",
     28     data:{
     29         shop:31,
     30         ok:"addst",
     31         x:0,
     32         y:0
     33     },
     34     methods:{
     35         add:function(){
     36             this.shop++
     37         },
     38         del:function(){
     39             this.shop--
     40         },
     41         deal:function(event){
     42             // 自动传入事件
     43             this.x=event.clientX;
     44             this.y=event.clientY;
     45         }
     46     }
     47 }
     48 )
     49 
     50 //数据双向绑定:比如我们的input标签,我们在输入内容的时候,后台获取的内容,也随之更改,这叫做单向绑定,如果我们的更改后台绑定数据,前端展示的数据也更改随之变化,这种方式叫做双向数据绑定。
     51 // 指令:ref和v-model  两种方式。
     52 // 建立使用v-model方式。 v-model="属性",其中属性要和data里的属性保持一致。 
     53 new Vue({
     54     el:"#data_bind",
     55     data:{
     56         name:"",
     57         age:""
     58     }
     59 })
     60 // vue提供了键盘的输入的监听事件,常见的有:.enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right
     61 new Vue(
     62     {
     63     el:"#ke_ev",
     64     data:{
     65         ok:"ok"
     66     },
     67     methods:{
     68         KeyUp:function(){
     69             alert(123)
     70         }
     71     }
     72 })
     73     
     74 //compute属性即计算属性。
     75 // methods和compute的区别: 
     76 // 计算属性,在被调用的时候只执行发生变化的dom的属性,如果虚拟dom属性不发生变化的话,不会更改该属性。
     77 // methods:无论dom是否发生变化都会被执行。
     78 // 计算属性和普通属性的绑定是一样的,也是使用双大括号:{{}}
     79 new Vue({
     80     el:"#compute_test",
     81     data:{
     82         a:0,
     83         b:0,
     84         age:20
     85     },
     86     computed:{
     87         addToA:function(){
     88             return this.a+this.age;
     89         },
     90         addToB:function(){
     91             return this.b+this.age;
     92         }
     93 
     94     }
     95 }
     96     )
     97 //动态绑定css和class
     98 // 使用指令v-bind
     99 // 通过data数据的绑定,val值的true和false 来决定是否显示class。一般结合计算属性进行绑定。
    100 new Vue({
    101     el:'#css_bind',
    102     data:{
    103         active:true,
    104         error:false
    105     },computed:{
    106         addCls:function(){
    107             return {
    108                 active:this.active,
    109                 error:this.error
    110             }
    111         }
    112     }
    113 })
    114 // 通过数组方式进行绑定。
    115 new Vue({
    116     el:"#arr_bind",
    117     data:{
    118         active:"active",
    119         error:"error"
    120     }
    121 })
    122 // 通过三元表达来判断是否添加class
    123 new Vue({
    124     el:"#three_bind",
    125     data:{
    126         active:"active",
    127         error:""
    128     }
    129 })
    130 //条件判断:v-if、v-else-if、v-eles指令。
    131 // 其中v-else 紧跟v-if 和v-else-if后面。
    132 new Vue({
    133     el:"#if-bind",
    134     data:{
    135         flag:false
    136     }
    137 })
    138 // 其中template 标签,是vue特有的标签,在页面并不存在的标签,属于模拟标签,一般用条件判断和for循环。
    139 // for循环。
    140 // 语法:item in items 不同于jquery的$.each() 在vue里,循环中的元素,最后一个元素是索引。你如{item,index} or {val,key,index}
    141 
    142 new  Vue({
    143     el:"#for_bind",
    144     data:{
    145         person:['tom','lili','jack'],
    146         fav:[{'name':'tom','age':22},{'name':'cc','age':21}],
    147         sys:"red"
    148     }
    149 })
    150 // 关于什么时候用{{}},什么时候用{}
    151 // {{}}:是模板语法,我们在单独插值的时候使用。
    152 // {}:是类似字典的含义,当我们的在html在绑定属性的时候,比如说css的时候,需要使用{}:<h1 v-bind:style="{background:sys}">for循环</h1>
    153 
    154 
    155 // 多实例
    156 // 在多实例的情况下,如果将一vue实例修改另一个vue实例的data数据呢?
    157 // 首先看下多实例:
    158 var  app_one=new Vue({
    159     el:"#app_one",
    160     data:{
    161         title:"this is app one"
    162     }
    163 })
    164 
    165 var app_two=new Vue({
    166     el:"#app_two",
    167     data:{
    168         title:"this is app two"
    169     },
    170     methods:{
    171         ChaneTitle:function(){
    172             app_one.title="被app_two修改了。"
    173         }
    174     }
    175 })
    176 // 如果app_two修改app_one的title呢?
    177 //调用:app_one.title即是app_one的title.类似于this.title 这里this就是app_one
    178 
    179 // 组件:所谓的组件,就是公共部分,可以被反复调用的部分。
    180 // 语法:   Vue.component('名称(这个名称是直接当做标签在html被调用的作用域使用.),{data:function(){return {xxx}},template:"模板"})
    181 // 注意:1)名称是被调用的标签。
    182 //         2)data:一定是函数,通过返回对象,来保证调用实例的各个之间的数据隔离,五不影响。
    183 //         3)template:是模板,这个后面跟的是html标签的字符串。需要注意的是:只有一个根标签。
    184 
    185 Vue.component('com_con',{
    186     data:function(){
    187         return {
    188             name:"tom",
    189             age:22
    190         }
    191     },
    192     methods:{
    193         changeAge:function(){
    194             this.age++
    195         }
    196     },
    197     template:`<p>{{name}}----{{age}}
    198         <button v-on:click="changeAge">点击增加年龄</button>
    199     </p>`
    200 })
    201 
    202 
    203 new Vue({
    204     el:"#com_bind",
    205 })
  • 相关阅读:
    417 Pacific Atlantic Water Flow 太平洋大西洋水流
    416 Partition Equal Subset Sum 分割相同子集和
    415 Add Strings 字符串相加
    414 Third Maximum Number 第三大的数
    413 Arithmetic Slices 等差数列划分
    412 Fizz Buzz
    410 Split Array Largest Sum 分割数组的最大值
    409 Longest Palindrome 最长回文串
    day22 collection 模块 (顺便对比queue也学习了一下队列)
    day21 计算器作业
  • 原文地址:https://www.cnblogs.com/evilliu/p/9202650.html
Copyright © 2011-2022 走看看