Vue 总结

vue 是什么

简介型的javascript框架    个人开发 (刘雨溪)

    特点:mvvm       m=mvc   module 模型   v=view 视图    c=controller  控制器
         mvvm       m=mvc   module 模型   v=view 视图     vm (视图与数据之间的传递)
         vue1 双向数据绑定   vue2 单向数据流
         单页面应用

v-model   数据绑定
data  返回对象用 return

v-for   循环   格式  v-for="字段名 in(of) 数组json"

v-show   显示 隐藏     传递的值为布尔值  true  false  默认为false

v-if   显示与隐藏     和v-show对比的区别 就是是否删除dom节点   默认值为false

v-else-if  必须和v-if连用

v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误

v-bind  动态绑定  作用: 及时对页面的数据进行更改

v-on 绑定事件  函数必须写在methods里面
@click  快捷方法

v-text  解析文本

v-html   解析html标签

v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'

v-once  进入页面时  只渲染一次 不在进行渲染

v-cloak  防止闪烁

v-pre  把标签内部的元素原位输出


指令在Vue中是个很重要的功能,在Vue项目中是必不可少的。根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
例如:

<p v-if="seen">现在你看到我了</p>

如上所示:其中,v-是Vue的标识,if是指令ID,yes是expression。yes是MVVM中的VM即ViewModel,当它的值发生变化,就会触发指令,改变View视图的显示。
expression还可以使用内联的模式,任何依赖的属性发生变化时都会触发指令的执行。例如:

<p v-if="'seen '+ user.name + ', ' + time"></p>

下面我们就谈谈常用的指令

数据渲染 v-text、v-html、v-model、{{}}

1、v-text

v-text是用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。其中:v-text可以简写为{{}},并且支持逻辑运算。例如:

<div id="app">  
  {{ message }}  
</div>  
var app = new Vue({  
   el : '#app',  
   data : {  
    message : 'hello world'      
 }  
})  

注:vue中有个指令叫做 v-once 可以通过v-once与v-text结合,实现仅执行一次性的插值

<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>  

2、v-html

v-html用于输出html,它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。

<div id="app">  
    <p v-html="html"></p>  
</div>  
var app = new Vue({  
        el: "#app",  
        data: {  
            html: "<b style='color:red'>v-html</b>"  
        }  
    });  

3、v-model

v-model通常用于表单组件的绑定,例如input,select等。它与v-text的区别在于它实现的表单组件的双向绑定,如果用于表单控件以外标签是没有用的。

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

4、{{}}

{{}}是v-text的简写形式

控制模块的显示/隐藏 v-if、v-show

v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

<template>
    <div id="app">
        <div v-if="isIf">
            if
        </div>
        <div v-show="ifShow">
            show
        </div>
        <button @click="toggleShow">toggle</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                isIf : true,
                ifShow : true,
                loginType : "username"
            }
        },
        methods: {
            toggleShow : function(){
                this.ifShow = this.ifShow ? false : true;
                this.isIf = this.isIf ? false : true;
            }
        }
    }
</script>

渲染循环列表 v-for

v-for是一个循环指令,一般跟数组结合起来使用,例如:

<p id="wantuizhijia">
 <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
 </ol>
</p>
 
<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   sites: [
    { name: '网推之家' },
    { name: '谷歌' },
    { name: '淘宝' }
   ]
  }
 })
</script>

我们也可以在模板中使用 v-for:

<p id="wantuizhijia">
 <ul>
  <template v-for="place in places">
   <li>{{ place.name }}</li>
   <li>--------------</li>
  </template>
 </ul>
</p>
 
<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   places: [
    { name: '厦门' },
    { name: '漳州' },
    { name: '福州' }
   ]
  }
 })
</script>

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

<p id="wangtuizhijia">
 <ul>
  <li v-for="value in object">
   {{ value }}
  </li>
 </ul>
</p>
 
<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '汇票盟',
    url: 'http://www.pjmeng.com',
    slogan: '美好生活,等待你的开创!'
   }
  }
 })
</script>

v-for 通过一个对象的属性来迭代数据,可以提供第二个的参数为键名:

<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key) in object">
   {{ key }} : {{ value }}
  </li>
 
 </ul>
</p>
 
<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
     name: '汇票盟',
    url: 'http://www.pjmeng.com',
    slogan: '美好生活,等待你的开创!'
   }
  }
 })
</script>

v-for 通过一个对象的属性来迭代数据,以第三个参数为索引:

<p id="wangtuizhijia">
 <ul>
  <li v-for="(value, key, index) in object">
   {{ index }} {{ key }}:{{ value }}
  </li>
 
 </ul>
</p>
 
<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '脚本之家',
    url: 'www.jb51.net',
    slogan: '美好生活,等待你的开创!'
   }
  }
 })
</script>

v-for 也可以循环整数

<p id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</p>
<script>
new Vue({
el: ‘#wangtuizhijia'
})
</script>
</body>

事件绑定 v-on

1、用于监听DOM事件,典型的就是v-on:click,处理的方法放在methods属性里会默认传一个参数。

<button @click="test">点击</button>  
  
methods: {  
    test: function (evt) {  
        console.log(evt);  
    }  
} 

这里的evt,是标准的鼠标点击事件,类似jquery的click事件的回调函数中的参数。
可以通过this来找到data属性里的值,例如:

data: {  
    items: "test"  
},  
methods: {  
    test: function (evt) {  
        console.log(this.items);  
        console.log(evt);  
    }  
}  

这里的this.items,就是data的items这个变量。
2、内联语句处理器
给v-on事件传一个固定参数

<button @click="test('a')">点击搜索age</button>  

当这个时候,函数的第一个参数就不是鼠标点击事件了,而是字符串a

test: function (mes) {  
    console.log(mes);  
}  

mes的值是’a’
$event
如果需要给他一个像上面一样的鼠标点击事件时,则使用$event作为参数(他和不传参数时的默认鼠标事件对象是相同的)。
使用Vue实例的变量,如果需要传一个data属性里的值,则直接放属性名
例如:

<div id="app">  
    <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a>  
</div>  
<script>  
    var test = {name: "test"};  
    var vm = new Vue({  
        el: '#app',  
        data: {  
            items: "test"  
        },  
        methods: {  
            test: function (msg, evt) {  
                console.log(msg);  
                evt.preventDefault();//阻止默认动作,比如这里是页面跳转  
            }  
        }  
    })  
</script>  

输出:test和BUTTON 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读