vue.js学习

时间：2017-10-18 20:07:29 阅读：225 评论：0 收藏：0 [点我收藏+]

标签：width 侦听器 ctr 对象实例 mode change cti 2-2

Vue.js（读音 /vju?/, 类似于 view）是一套构建用户界面的渐进式框架。MVVM框架

Vue.js的目的：1、解决数据绑定的问题 2、开发Single Page Application(SPA)大型单页面应用。主要支持移动端，也支持PC端。 3、支持组件化，这样复用度高

MVVM模式：

　　M：model 业务模型，用处：处理数据，提供数据

　　V： view 用户界面、用户界面

M->V V->M

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

使用Vue.js步驟：1、引入Vue.js 2、创建一个Vue对象，其中el代表Vue管理对象的界限。data是一个对象，用于存放显示在页面上的数据。

<!DOCTYPE html>
<html>
  <head>
    <title>test01.html</title>
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  
  <body>
    <div id="app">
          <p>{{ message }}</p>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            message: ‘Hello Vue.js123!‘
          }
        })
    </script>
 </body>
</html>

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值。

如果后台改动message时，相应的页面也会随之变化。使用appT.message=“XXX”更改。每个 Vue 实例都会代理其 data 对象里所有的属性

Vue指令，其实就是vue当中以v-开头的自定义属性。

1、使用 v-html 指令用于输出 html 代码：

 <body>
    <div id="app" v-html="message"></div>
    <script>
        new Vue({
              el: ‘#app‘,
              data: {
            message: ‘<h1>使用V-html</h1>‘
          }
        })
    </script>
 </body>

V-HTML

2、HTML 属性中的值应使用 v-bind 指令

<body>
    <div>
          <a  id="app" v-bind:href="url">{{text}}</a>
    </div>
    <script>
        new Vue({
              el: ‘#app‘,
              data: {
            url:‘http://www.baidu.com‘,
            text:‘点击‘
          }
        })
    </script>
 </body>

v-bind:HTNL属性

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

3、v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

 <body>
    <div>
          <P id="app" v-if="seen">你看见我了！</P>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            seen:true
          }
        })
    </script>
 </body>

v-if

该元素模块不存在了技术分享

4、v-show指令用来决定是否显示元素

 <body>
    <div id="app">
          <p v-show="seen">你看见我了</p>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            seen:true
          }
        })
    </script>
 </body>

v-show

技术分享

该元素模块被设置为display：none。

v-if跟v-show的区别：

　　v-if有更高的切换消耗，安全性更高。而v-show有更多的初始化渲染消耗。因此频繁切换而对安全性无要求可用v-show。如果在运行，条件不可改变，则用v-if比较好。

5、v-else必须跟在v-if后面，否则不能被识别。

  <body>
    <div id="app">
          <p v-if="seen">你看见我了</p>
          <p v-else>你看不见我了</p>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            seen:true
          }
        })
    </script>

6、v-else-if

<body>
    <div id="app">
          <p v-if="type===‘A‘">A</p>
          <p v-else-if="type===‘B‘">B</p>
          <P v-else>C</P>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            type:‘A‘
          }
        })
    </script>
 </body>

View Code

7、在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

<body>
    <div id="app">
          <p>{{message}}</p>
          <input v-model="message">
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            message:‘hello world‘
          }
        })
    </script>
 </body>

V-MODEL

也就是说页面输入改动，对应的data数据也跟着改动

8、循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<body>
    <div id="app">
          <ui>
              <li v-for="person in persons">
                  {{person.name}},
                  {{person.old}},
                  {{person.sex}}
              </li>
          </ui>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            persons:[
            {name:‘wang1‘,old:‘20‘,sex:‘male‘},
            {name:‘wang2‘,old:‘21‘,sex:‘female‘}
            ]
          }
        })
    </script>
 </body>

View Code

9、v-for 可以通过一个对象的属性来迭代数据：

  <body>
    <div id="app">
          <ui>
              <li v-for="value in person1">
                  {{value}}
              </li>
          </ui>
          ---------------------------------------
          <oi>
              <li v-for="(value,key) in person2">
                  {{key}} --- {{value}}
              </li>
          </oi>
          ---------------------------------------
          <ui>
              <li v-for="(value,key,index) in person3">
                  {{index}}---{{key}}---{{value}}
              </li>
          </ui>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
            person1:{name1:‘wang1‘,old1:‘20‘,sex1:‘male‘},
            person2:{name2:‘wang2‘,old2:‘30‘,sex2:‘female‘},
            person3:{name3:‘wang3‘,old3:‘40‘,sex3:‘male‘}               
          }
        })
    </script>
 </body>

v-for

10、v-for 也可以循环整数

  <body>
    <div id="app">
          <ui>
              <li v-for="n in 10">
                  {{n}}
              </li>
          </ui>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {}
        })
    </script>
 </body>

n in num

11、Vue.js 计算属性

  <body>
    <div id="app">
          直接逻辑：{{ message.split(‘‘).reverse().join(‘‘) }}<br>
          计算属性关键字computed：{{reverseMessage1}} <br>
          method：{{reverseMessage2()}}
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
                  message:‘HelloWorld!‘
              },
              computed:{
                  reverseMessage1:function(){
                      return this.message.split(‘‘).reverse().join(‘‘)
                  }
              },
              methods:{
                  reverseMessage2:function(){
                      return this.message.split(‘‘).reverse().join(‘‘)
                  }
              }            
        })
    </script>
 </body>

View Code

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

12、Vue.js class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

<script type="text/javascript" src="vue.min.js"></script>
    <style type="text/css">
        .active{
            width:100px;
            height:100px;
            background:green;
        }  
    </style>
  </head>
  <body>
    <div id="app">
          <div v-bind:class="{active:isActive}"></div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
                  isActive:true
              }            
        })
    </script>

我们也可以在对象中传入更多属性用来动态切换多个 class 。

    <script type="text/javascript" src="vue.min.js"></script>
    <style type="text/css">
        .active{
            width:100px;
            height:100px;
            background:green;
        } 
        .err{
            width:20px;
            height:20px;
            background:red;
        } 
    </style>
  </head>
  <body>
    <div id="app">
          <div v-bind:class="{active:isActive,‘err‘:isErr}"></div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
                  isActive:true,
                  isErr:true
              }            
        })
    </script>
 </body>

<div v-bind:class="{active:isActive,err:isErr}"></div> 其中err加不加单引号效果没差别。

我们也可以直接绑定数据里的一个对象：

    <style type="text/css">
        .active{
            width:100px;
            height:100px;
            background:green;
        } 
        .err{
            width:20px;
            height:20px;
            background:red;
        } 
    </style>
  </head>
  <body>
    <div id="app">
          <div v-bind:class="objectClass"></div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
              objectClass:{
                  active:true,
                  err:true
                  }
              }            
        })
    </script>

我们可以把一个数组传给 v-bind:class ，实例如下：

    <script type="text/javascript" src="vue.min.js"></script>
    <style type="text/css">
        .active{
            width:100px;
            height:100px;
            background:green;
        } 
        .err{
            width:20px;
            height:20px;
            background:red;
        } 
    </style>
  </head>
  <body>
    <div id="app">
          <div v-bind:class="[activeClass,errorClass]"></div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
                  activeClass:‘active‘,
                  errorClass:‘err‘
              }            
        })
    </script>

我们还可以使用三元表达式来切换列表中的 class ：

    <style type="text/css">
        .active{
            width:100px;
            height:100px;
            background:green;
        } 
        .err{
            width:20px;
            height:20px;
            background:red;
        } 
    </style>
  </head>
  <body>
    <div id="app">
          <div v-bind:class="[activeClass,isErr?errorClass:‘‘]"></div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
                  isErr:true,
                  activeClass:‘active‘,
                  errorClass:‘err‘
              }            
        })
    </script>

13、Vue.js style(内联样式)

我们可以在 v-bind:style 直接设置样式：

  <body>
    <div id="app">
          <div v-bind:style="{color:colorSet,fontSize:fontSet}">hello world</div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
                  colorSet:‘red‘,
                  fontSet:‘30px‘
                  }
        })
    </script>

v-bind:style

也可以直接绑定到一个样式对象，让模板更清晰：

    <div id="app">
          <div v-bind:style="styleObject">hello world</div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
              styleObject:{
                  color:‘red‘,
                  fontSize:‘30px‘
                  }
              }    
        })
    </script>

v-bind:style

    <div id="app">
          <div v-bind:style="[styleObject,styleObject2]">hello world</div>
    </div>
    <script>
        var appT=new Vue({
              el: ‘#app‘,
              data: {
              styleObject:{
                  color:‘red‘,
                  fontSize:‘30px‘
                  },
              styleObject2:{
                  ‘font-weight‘:‘bold‘
              }
              }    
        })
    </script>

v-bind:style=【】

其中有的css style属性加单引号（‘‘）有的没有。至于为什么，不太明白。说明CSS学的有待提高

14、Vue.js 事件处理器

  <div id="app">
          <button v-on:click="counter+=1">点击</button><br>
          点击了{{counter}}次
    </div>
    <script>
     var appT=new Vue({
         el:‘#app‘,
         data:{
          counter:0
         }
        })
    </script>

v-on:click=""

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

 <div id="app">
          <button v-on:click="say1()">say</button>
          <button v-on:click="say2(‘hello‘)">say hello</button>
          <button @click="say3(‘hello‘,‘wang‘)">say hello to...</button>
    </div>
    <script>
     var appT=new Vue({
             el:‘#app‘,
             methods:{
                 say1:function(){
                     alert(‘say...‘)
                 },
                 say2:function(message){
                     alert(message)
                 },
                 say3:function(message,name){
                     alert(message+‘ ‘+name)
                 }         
             }     
     })
    </script>

带参数事件

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件至少触发一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

实例

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

15、你可以用 v-model 指令在表单控件元素上创建双向数据绑定。更多实例

 <body>
    <div id="app">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
        <br>
        -----------------------------------------
        <br>
        <input type="checkbox" id="java" value="Java" v-model="checkedNames">
        <label for="java">Java</label>
        <input type="checkbox" id="php" value="PHP" v-model="checkedNames">
        <label for="php">PHP</label>
        <input type="checkbox" id="c" value="C" v-model="checkedNames">
        <label for="c">C</label>
        <br>
        选择的语言有：{{checkedNames}}
        <br>
        ----------------------------------------------
        <br>
        <input type="radio" id="math" value="Math" v-model="picked">
        <label for="math">Math</label>
        <input type="radio" id="eng" value="English" v-model="picked">
        <label or="eng">English</label>
        <br>
        你选择的课程是：{{ picked }}
        <br>
        -------------------------------------------
        <br>
        <select v-model="selected">
            <option value="">请选择城市</option>
            <option value="郑州">郑州</option>
            <option value="洛阳">洛阳</option>
        </select>
        <br>
        你选择的城市是{{selected}}       
    </div>
    <script>
    var appT=new Vue({
        el:‘#app‘,
        data:{
            checked:false,
            checkedNames:[],
            picked:‘English‘,
            selected:‘‘
        }    
    })    
    </script>
 </body>

v-model

修饰符

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

16、Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

    <div id="app">
        <wang></wang>
    </div>
    <script>
        Vue.component(‘wang‘,{
            template:‘<h1>自定义组件</h1>‘
        })
        new Vue({
            el:‘#app‘,
            data:{}
        })
    </script>

Vue.component

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

    <div id="app">
        <huadi></huadi>
    </div>
    <script>
        var Child={
            template:‘<ui><li>学习</li><li>在学</li></ui>‘
        }
        new Vue({
            el:‘#app‘,
            data:{},
            components:{
            ‘huadi‘:Child
            }
        })
    </script>

components

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

<div id="app">
        <child message="hello" ></child>
    </div>
    <script>
        Vue.component(‘child‘,{
            props:[‘message‘],
            template:‘<h1>{{message}}</h1>‘
        
        })
        new Vue({
            el:‘#app‘        
        })
    </script>

props

    <div id="app">
        <input v-model="parmessage">
        <child v-bind:message="parmessage" ></child>
    </div>
    <script>
        Vue.component(‘child‘,{
            props:[‘message‘],
            template:‘<h1>{{message}}</h1>‘
        
        })
        new Vue({
            el:‘#app‘,
            data:{
            parmessage:‘你好‘
            }        
        })
    </script>

v-bind:props属性

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中：

    <div id="app">
        <ol>
            <yatou v-for="item in names" v-bind:message="item"></yatou>
        </ol>
    </div>
    <script>
        Vue.component(‘yatou‘,{
            props:[‘message‘],
            template:‘<li>{{message.name}}</li>‘
        
        })
        new Vue({
            el:‘#app‘,
            data:{
                names:[
                    {name:‘yatou1‘},
                    {name:‘yatou2‘},
                    {name:‘yatou3‘}
                ]
            }
        })
    </script>

v-for与v-bind

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>

<script>
Vue.component(‘button-counter‘, {
  template: ‘<button v-on:click="increment">{{ counter }}</button>‘,
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit(‘increment‘)
    }
  },
})
new Vue({
  el: ‘#counter-event-example‘,
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

View Code

有待学习，努力提高

vue.js学习

标签：width 侦听器 ctr 对象实例 mode change cti 2-2

原文地址：http://www.cnblogs.com/huadiyatou/p/7685390.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行