VUE用途

VUE：是用来做单页面的

掘金网单击时会创建对象与销毁，减少与服务器的交互

1模块使用-------------------

    1导出------------

    export default ooo

    2导入--------------：

    import xxx from ooo
　　3挂载
　　4 使用

2webpack:前端工具打包机-----------------

    作用它能降HTML、css/js。png、font 图片进行打包

插件（比如轮播图）:一个功能。js文件

组件：boostrap组件的下拉列表

混淆：把function里的变量进行缩写成一个字母
grunt
gulp
 

指令系统

1条件渲染

　　1.1:v-if

<!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></title>

</head>

<body>

    <div id="block">

        <h3>{{title}}</h3>

　　　　

　　　　　　------------------------------------------------------------------

        <div v-if='show'>钱到碗里来</div>#1：data里show的值为真的话显示‘钱到碗里来’

　　　　　　----------------------------------------------------------------

        <div v-else>为假显示</div>:2：show为假的话显示‘为假显示’

　　　　　　

 ----------------------------------------------------------------

        <div v-if="type==='a'">

            老大

        </div>

        <div v-else-if="type==='b'">老二</div>

        <div v-else="type==='c'">老幺</div>

    <script src="vue.js"></script>

    <script>

        // 1.创建vue实例化对象

        // 参数

        var block = new Vue({

            el:"#block",

            // 所有的数据都放在数据属性中

            data:{

               title:'好运来',

//             show:false,

//             type:'c'

            }

        })

    </script>

</body>

</html>

v-if

　　1.2：v-show

<body>

<div id="app">

    <h1 v-show="ok">Hello!</h1>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    ok: true

  }

})

</script>

</body>

v-show

3:v-if vs v-show：

一种操作用v-if,菜单切换多次用v-show

　　v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

　　一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。v-show:是使用display：none来定义是否显示

4:v-if与v-for一起使用

v-for指令，后面马上介绍到。

当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

  1. class与style绑定
<!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></title>

</head>

<body>

    <div id="block">

        <h3>{{title}}</h3>

        <!--鼠标悬浮到绑定属性操作时会显示’好运来‘-->

        <h1 v-show="isShow" v-bind:title="title">绑定属性操作</h1>

    <script src="vue.js"></script>

    <script>

        // 1.创建vue实例化对象

        // 参数

        var block = new Vue({

            el:"#block",

            // 所有的数据都放在数据属性中

            data:{

               title:'好运来',

                'isShow':true

            }

        })

    </script>

</body>

</html>

v-bind(绑定class属性 )

　该脚本实现了执行方法的功能

<!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></title>

    <style type="text/css">

        .box1{

            width: 100px;

            height: 100px;

            background: red;

        }

        .box2{

            width: 100px;

            height: 100px;

            background: green;

        }

    </style>

</head>

<body>

    <div id="block">

        <!--<h3>{{title}}</h3>-->

        <!--鼠标悬浮到绑定属性操作时会显示’好运来‘-->

        <h1 v-show="isShow" v-bind:title="title">绑定属性操作</h1>

        <!--给盒子绑定红色背景-->

      <div v-bind:class='{box1:isRed}'></div>

      <div class='a' v-bind:class='{box1:isRed,box2:isGreen}'></div>

    <!------点击按钮执行methods里的方法----------------------------------->

     <button v-on:click ='clickHandler'>切换</button>

        <!--methods:{

    clickHandler(){

        this.isGreen = !this.isGreen;-->

    <script src="vue.js"></script>

    <script>

        var block = new Vue({

            el:"#block",

            // 所有的数据都放在数据属性中

            data:{

               title:'好运来',

                'isShow':true,

                'isRed':true ,

                'isGreen':false

            },

            methods:{

    clickHandler(){

        this.isGreen = !this.isGreen;

    }

}

        })

    </script>

</body>

</html>

绑定HTML Class

　2.列表渲染

计算属性与侦听器

计算属性：就是修改data里的数据属性。

												


											
VUE知识day2的更多相关文章
	

    
								
  1. vue知识总结
		
    vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...
    
		
    2. 
						
  2. 2018 我要告诉你的 Vue 知识大全
		
    Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很多:不管选择什么框架,除了 ...
    
		
    3. 
						
  3. 总结vue知识体系之实用技巧
		
    vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能.那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本 ...
    
		
    4. 
						
  4. vue知识总汇
		
    学前预备知识 ECMAScript简介和ES6的新增语法 Nodejs基础 webpack的介绍 babel简介 vue基础 vue基础
    
		
    5. 
						
  5. Vue知识分享一
		
    最近想着把之前学的Vue的知识整理一下,方便在公司和同事一起分享.我想要按照下面几个方面去说一下,我对vue的学习理解. 一.什么是VUE vue.js是一个用来开发Web界面的前端库,是很轻量级的工 ...
    
		
    6. 
						
  6. 前端Vue知识小白
		
    感觉是已好久没写博文了.今日难得有时间,便写一篇文章.此文章是关于前端知识的,我本身是后端,因工作或其他需要,便学习了前端Vue.此文章是在菜鸟教程上学习的.那么下面进入正文! 首先,Vue.js是一 ...
    
		
    7. 
						
  7. 前端知识扫盲-VUE知识篇一（VUE核心知识）
		
    最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...
    
		
    8. 
						
  8. Vue 知识复习(上)
		
    Vue Vue实例 创建实例: var vm = new Vue({ //code }) 数据与方法: 只有当实例被创建时 data 中存在的属性才是响应式的; Vm.b = 'h1' 是不会触发视图 ...
    
		
    9. 
						
  9. Vue 知识整理—02-起步
		
    一:Vue 语法格式: vue vm = new Vue({ //选项 }) 二:Vue 实例: <div id="app"> <p>{{message}} ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 深入了解Looper、Handler、Message之间关系
			
    深入了解Looper.Handler.Message之间关系 前言及简介 上个星期我们整个项目组趁着小假期,驱车去了江门市的台山猛虎峡玩了两个多钟左右极限勇士全程漂流,感觉真得不错,夏天就应该多多玩水 ...
    
			
    2. 
						
  2. normalize.css源码解析
			
    什么是normalize.css?  它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize. ...
    
			
    3. 
						
  3. php 如何截取中文字符串
			
    在网站应用中时常需要对相应的字符串进行截取.最常用的是使用substr函数对字符串进行截取. 然而,substr和strlen函数只在处理英文字符串时可以正确使用,在截取中文字符时,时常出现乱码.这时 ...
    
			
    4. 
						
  4. python-五个面试题
			
    问题一:以下的代码的输出将是什么? 说出你的答案并解释. class Parent(object): x = 1 class Child1(Parent): pass class Child2(Par ...
    
			
    5. 
						
  5. Unicode和UTF-8之间的转换
			
    转自:http://www.cnblogs.com/xdotnet/archive/2007/11/23/unicode_and_utf8.html#undefined 最近在用VC++开发一个小工具 ...
    
			
    6. 
						
  6. mysql8安装配置备忘
			
    Mysql8安装配置 1. 初始化 进入mysql安装目录中的bin目录,在cmd中输入: mysqld --initialize --console 加上--console参数可以看到初始化之后的默 ...
    
			
    7. 
						
  7. 王亮：游戏AI探索之旅——从alphago到moba游戏
			
    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云加社区技术沙龙 发表于云+社区专栏 演讲嘉宾:王亮,腾讯AI高级研究员.2013年加入腾讯,从事大数据预测以及游戏AI研发工作.目前 ...
    
			
    8. 
						
  8. vmware8~12最新版本 克隆Centos6.X 系列虚拟机网卡无法启动问题 （三步即可）
			
    1.因工作或者学习需要,都需要在VM上克隆一台服务器,此时无论是快捷克隆(相当于快照的机体)或者完整克隆,都会碰到IP问题. 如:创建后症状:启动之后使用ifconfig,发现无ip地址,只有回环地址 ...
    
			
    9. 
						
  9. 来一波Linux中查看cpu、磁盘、内存、网络的命令
			
    转载请注明出处. 如果想远程管理服务器就有远程管理卡,比如Dell idRAC,HP ILO,IBM IMM 查看硬件的温度/风扇转速,电脑有撸大师,服务器就有ipmitool.使用ipmitool实 ...
    
			
    10. 
						
  10. Linux基础学习1--档案的属性和目录
			
    用命令 ls -al可以列出当前所有档案,和档案的各种情况 第一块是档案属性:一共10个,第一个代表档案类型 {d:目录,-:档案,l:连接档,b:接口设备,c:串行端口设备},接下来是三个一组,第一 ...
    
			
    11.