什么是vue.js

　　1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex)

　　2.vue.js 是前端的主流框架之一,和angular.js react.js 一起 并成为前端三大主流框架

　　3.vue.js是一套构建用户界面的框架,值关注视图层,不仅易于上手,还可便于第三方库或既有项目整合.(vue有配套的第三方库,可以整合起来做带向项目的开发)

　　4.前端的主要工作?主要负责MVC 的v这一层 主要工作就是和界面交道

为什么要学习流行框架

　　企业为了提高开发效率,在企业中,事件就是效率,效率就是金钱

　　提高开发的发展历程,原生js -> jquery类的类库 -> 前端模板引擎 -> angular/vue/

　　在vue中,一个核心的概念,就是让用户不在操作DOM操作元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑

　　增强自己就业时候的竞争力

框架和库 的却别:

　　框架:是一台完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目

　　node 中的 express

　　库(插件):提供某一个小功能,对项目的侵入性小,如果某个库完成某些需求,可以很容易切换到其他库的实现要求.

node(后端) 中的MVC 与 前端 MVVM 之间的区别:

　　MVC (后端概念)

　　

　　MVVM 前端概念:

　　　　

　小结:

vue 第一话: 实例化 vue

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>vue firstone</title>
  6.         <script src="vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <p>{{ msg }}</p>
  11.         </div>
  12.  
  13.         <script>
  14.             var vm = new Vue({
  15.                 el:    '#app',
  16.                 data:{
  17.                     msg:'hello world!',
  18.                 },
  19.             })
  20.         </script>
  21.     </body>
  22. </html>

需要引入vue.js

vue第二话:　　v-cloak  v-text  v-html v-on v-bind

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="vue.js"></script>
  7.         <style>
  8.             [v-cloak]{
  9.                 display: none;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="app">
  15.             <!-- 文件显示以及解决闪烁问题 cloak/text/html的应用方式 -->
  16.             <p v-cloak>00000{{ msg }}0000</p>
  17.             <h3 v-text="msg">00000000</h3>
  18.             <p v-text="msg"></p>
  19.             <p v-html="msg"></p>
  20.             <!-- -------------------------------- -->
  21.             <!-- 事件绑定 v-bind 绑定js表达式-->
  22.             <p>
  23.                 <input type="button" value="按钮" v-bind:title="msg2" />
  24.                 <input type="button" value="按钮" v-bind:title="msg2 + '添加字符'" />
  25.                 <input type="button" value="按钮" :title="msg2 + '简写方式!'" />
  26.             </p>
  27.             <!-- 事件绑定v-on 绑定methods 事件-->
  28.             <p>
  29.                 <input type="button" value="v-on绑定methods" v-on:click="show" />
  30.                 <input type="button" value="v-on绑定methods 简写方式" @click="show" />
  31.                 <input type="button" value="v-on绑定methods 其他事件" v-on:mouseover="show" />
  32.             </p>
  33.         </div>
  34.  
  35.         <script>
  36.             var vm = new Vue({
  37.                 el:'#app',
  38.                 data:{
  39.                     msg:'<h1>hello</h1>',
  40.                     msg2:'(v-bind属性!)this button!'
  41.                 },
  42.                 methods:{
  43.                     show:function(){
  44.                         alert("OK")
  45.                     },
  46.                 }
  47.             })
  48.         </script>
  49.     </body>
  50. </html>

vue第三话: 跑马灯练习

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <input type="button" value="启动" @click="start" />
  11.             <input type="button"  value="停止"@click="stop" />
  12.             <input type="text" :value="info" />
  13.  
  14.             <h1>{{ info }}</h1>
  15.         </div>
  16.  
  17.         <script>
  18.             var vm = new Vue({
  19.                 el:'#app',
  20.                 data:{
  21.                     info:'hello world !',
  22.                     Intervalid:null,
  23.  
  24.                 },
  25.                 methods:{
  26.                     start(){
  27. //                         var _this = this
  28. //                         setInterval(function(){
  29. //                             // console.log(this.info)
  30. //                             var start0 = _this.info.substring(0,1)
  31. //                             var end0 = _this.info.substring(1)
  32. //                             _this.info = end0 + start0
  33. //                         },400)
  34.  
  35.                         // => 说明函数体外部的this 参数 传递至函数体内部!
  36.                         if(this.Intervalid != null) return;
  37.                         this.Intervalid = setInterval( () => {
  38.                             // console.log(this.info)
  39.                             var start0 = this.info.substring(0,1)
  40.                             var end0 = this.info.substring(1)
  41.                             this.info = end0 + start0
  42.                         },400)
  43.  
  44.                     },
  45.                     stop(){
  46.                         clearInterval(this.Intervalid);
  47.                         this.Intervalid = null;
  48.                     },
  49.                 }
  50.             })
  51.  
  52.         </script>
  53.     </body>
  54. </html>

vue第四话 v-on 事件修饰符

.stop 阻止冒泡

.prevent 阻止默认时间

.capture 添加时间侦听器使用事件模式

.self 只当前事件在该元素本身(比如不是子元素)触发时触发回调

.once 事件只触发一次

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script></script>
  7.         <script src="vue.js"></script>
  8.         <style>
  9.             .inner{
  10.                 height: 200px;
  11.                 width: 200px;
  12.                 background-color: aqua;
  13.             }
  14.             .inner2{
  15.                 height: 200px;
  16.                 width: 200px;
  17.                 background-color: firebrick;
  18.             }
  19.             .inner3{
  20.                 height: 200px;
  21.                 width: 200px;
  22.                 background-color:greenyellow;
  23.             }
  24.             .inner4{
  25.                 height: 200px;
  26.                 width: 200px;
  27.                 background-color:gray;
  28.             }
  29.         </style>
  30.     </head>
  31.     <body>
  32.         <div id="app">
  33.             <!-- 此时点击按钮,同时也会触发div的点击事件. -->
  34.             <div class="inner" @click="div0">
  35.                 <input type="button" value="点击" @click="inp0"/>
  36.                 <!-- .stop -->
  37.                 <input type="button" value="点击(.stop)" @click.stop="inp0"/>
  38.                 <!-- .prevent 阻止默认行为 -->
  39.                 <p><a href="http://www.baidu.com" @click.prevent="bdclick">百度链接</a></p>
  40.             </div>
  41.  
  42.             <!-- .capture 捕获机制-->
  43.             <div class="inner2" @click.capture="div0">
  44.                 <input type="button" value="点击" @click="inp0"/>
  45.             </div>
  46.             <!-- .self 点击当前元素时触发-->
  47.             <div class="inner3" @click.self="div0">
  48.                 <input type="button" value="点击" @click.self="inp0"/>
  49.             </div>
  50.             <!-- .once只触发一次 -->
  51.             <div class="inner4" @click.once="div0">
  52.                 <input type="button" value="点击" @click.once="inp0"/>
  53.             </div>
  54.  
  55.         <!-- 方法之间可以相互叠加调用! -->
  56.         <!--
  57.         .self .stop 区别:
  58.         .self只阻止 自己元素上的冒泡,并不阻止自己外层的元素冒泡
  59.         .stop阻止除自已以外的其他元素冒泡
  60.         -->
  61.         </div>
  62.  
  63.         <script>
  64.             var ve = new Vue({
  65.                 el:'#app',
  66.                 data:{
  67.                 },
  68.                 methods:{
  69.                     div0(){
  70.                         console.log('this div0!')
  71.                     },
  72.                     inp0(){
  73.                         console.log("this inp0!")
  74.                     },
  75.                     bdclick(){
  76.                         console.log('baidu 链接事件!')
  77.                     }
  78.                 },
  79.             })
  80.         </script>
  81.  
  82.     </body>
  83. </html>

vue 第五话 双向数据绑定 v-model

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script></script>
  7.         <script src="vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <!--
  12.             使用v-model 可以是先,表单元素和model中数据的双向书绑定
  13.             但是注意!
  14.             v-model 只能运用在 表单元素中
  15.             -->
  16.             <input type="text" v-model="msg" />
  17.             <h3>{{ msg }}</h3>
  18.         </div>
  19.  
  20.         <script>
  21.             var ve = new Vue({
  22.                 el:'#app',
  23.                 data:{
  24.                     msg:'hello world ! '
  25.                 },
  26.                 methods:{
  27.  
  28.                 },
  29.             })
  30.  
  31.         </script>
  32.  
  33.     </body>
  34. </html>

vue第6话 简易计算器练习

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script></script>
  7.         <script src="vue.js"></script>
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <input type="text"  v-model="num1" />
  12.             <select v-model="opt">
  13.                 <option value ="+">+</option>
  14.                 <option value ="-">-</option>
  15.                 <option value ="*">*</option>
  16.                 <option value ="/">/</option>
  17.             </select>
  18.             <input type="text"  v-model="num2" />
  19.             <input type="button" value="=" @click='jisuan' />
  20.             <input type="text"  v-model="result" />
  21.         </div>
  22.  
  23.         <script>
  24.             var ve = new Vue({
  25.                 el:'#app',
  26.                 data:{
  27.                     num1:0,
  28.                     opt:'+',
  29.                     num2:0,
  30.                     result:0,
  31.                 },
  32.                 methods:{
  33.                     jisuan(){
  34. //                         switch(this.opt){
  35. //                             case '+':
  36. //                                 this.result = parseInt(this.num1) + parseInt(this.num2)
  37. //                             break;
  38. //                             case '-':
  39. //                                 this.result = parseInt(this.num1) - parseInt(this.num2)
  40. //                             break;
  41. //                             case '*':
  42. //                                 this.result = parseInt(this.num1) * parseInt(this.num2)
  43. //                             break;
  44. //                             case '/':
  45. //                                 this.result = parseInt(this.num1) / parseInt(this.num2)
  46. //                             break;
  47. //                         }
  48.  
  49.                         this.result = eval(this.num1 + this.opt + this.num2)
  50.  
  51.                     },
  52.                 },
  53.             })
  54.  
  55.         </script>
  56.  
  57.     </body>
  58. </html>

vue 第七话 样式选择

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="vue.js"></script>
  7.         <style>
  8.             .st1{
  9.                     width: 200px;
  10.                     height: 200px;
  11.             }
  12.             .st2{
  13.                 background-color: #ADFF2F;
  14.             }
  15.             .active{
  16.                 display: none;
  17.             }
  18.  
  19.         </style>
  20.  
  21.     </head>
  22.     <body>
  23.         <div id="app">
  24.             <input type="button" value="显示" @click='a'/>
  25.             <input type="button" value="隐藏" @click='b' />
  26.  
  27.             <p><h1 :class="['st1','st2']">aaaaaaaaaaaa !!!</h1></p>
  28.  
  29.             <p><h1 :class="['st1','st2',dis?'active':'']">bbbbbbbbbbbb !!!</h1></p>
  30.  
  31.             <p><h1 :class="['st1','st2',{'active':dis}]">cccccccccccc !!!</h1></p>
  32.  
  33.             <p><h1 :class="{st1:true,st2:true,active:dis}">dddddddddd !!!</h1></p>
  34.  
  35.             <p><h1 :class="sobj">EEEEEEEEEEEEE !!!</h1></p>
  36.  
  37.         </div>
  38.  
  39.         <script>
  40.             var vm = new Vue({
  41.                 el: '#app',
  42.                 data: {
  43.                     dis:false,
  44.                     sobj:{st1:true,st2:true,active:false},
  45.                 },
  46.                 methods: {
  47.                     a(){
  48.                         this.dis = false
  49.                     },
  50.                     b(){
  51.                         this.dis = true
  52.                     },
  53.                 }
  54.             })
  55.         </script>
  56.     </body>
  57. </html>

vue 第八话 内联样式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="vue.js"></script>
  7.  
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <h1 :style="{color:'red','font-weight':200}">asdadsada</h1>
  12.             <h1 :style="sty1">asdadsada</h1>
  13.             <h1 :style="[sty1 , sty2]">asdadsada</h1>        
  14.  
  15.         </div>
  16.  
  17.         <script>
  18.             var vm = new Vue({
  19.                 el: '#app',
  20.                 data: {
  21.                     sty1:{color:'green','font-weight':100},
  22.                     sty2:{'font-style':'italic'},
  23.                 },
  24.                 methods: {
  25.                 }
  26.             })
  27.         </script>
  28.     </body>
  29. </html>

vue 第九话 v-for循环

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="vue.js"></script>
  7.  
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <p>{{ list[0] }}</p>
  12.             <p>{{ list[1] }}</p>
  13.             <p>{{ list }}</p>
  14.  
  15.             <!-- 循环列表 -->
  16.             <p v-for='i in list'>{{ i }}</p>
  17.  
  18.             <!-- 循环列表,以及列表索引 -->
  19.             <p v-for='i,index in list'>{{ i }} - {{ index }}</p>
  20.  
  21.             <!-- 循环列表对象 -->
  22.             <p v-for='i,j in list2'>{{ i.id }} - {{ i.name }} - {{ j }}</p>
  23.  
  24.             <!-- 循环对象 -->
  25.             <p v-for='i,j,l in user'>{{ i }}- {{ j }} - {{ l }}</p>
  26.  
  27.             <!-- 循环数据 -->
  28.             <p v-for='count in 15'>{{ count }}</p>
  29.  
  30.         </div>
  31.  
  32.         <script>
  33.             var vm = new Vue({
  34.                 el: '#app',
  35.                 data: {
  36.                     list:[1,2,3,4,5,6,7,8,9],
  37.                     list2:[
  38.                         {id:1,name:'a1'},
  39.                         {id:2,name:'a2'},
  40.                         {id:3,name:'a3'},
  41.                         {id:4,name:'a4'},
  42.                         {id:5,name:'a5'},
  43.                         {id:6,name:'a6'},
  44.                     ],
  45.                     user:{
  46.                         id:1,
  47.                         name:'alex',
  48.                         gender:'男',
  49.                     },
  50.                 },
  51.                 methods: {
  52.                 }
  53.             })
  54.         </script>
  55.     </body>
  56. </html>

vue 第十话 v-for key 值 数据绑定

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="vue.js"></script>
  7.  
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <p>
  12.                 <label>id </label><input type="text" v-model="id"/>
  13.                 <label>name</label> <input type="text" v-model="name"/>
  14.                 <input type="button" value="add" @click="add" />
  15.             </p>
  16.  
  17.             <label>序号</label>    -    <label>姓名</label>
  18.             <p v-for='i in info' :key='i.id'><input type="checkbox" />{{ i.id }} ------- {{ i.name }}</p>
  19.  
  20.             <!--
  21.             注意:!!!
  22.             v-for 循环的时候 key属性只能使用num 或 str 数据类型绑定
  23.             key在使用的时候,必须要使用v-bind属性绑定的形式,指定key的值
  24.             在组件中 使用v-for 循环的时候 或者在一些特殊的情况中
  25.             如果v-for有问题 必须在使用v-for的是同时指定唯一的字符串/数字 类型:key值
  26.             -->
  27.  
  28.         </div>
  29.  
  30.         <script>
  31.             var vm = new Vue({
  32.                 el: '#app',
  33.                 data: {
  34.                     id:'',
  35.                     name:'',
  36.                     info:[
  37.                         {id:1,name:'a1'},
  38.                         {id:2,name:'a2'},
  39.                         {id:3,name:'a3'},
  40.                         {id:4,name:'a4'},
  41.                         {id:5,name:'a5'},
  42.                         {id:6,name:'a6'},
  43.                     ],
  44.                 },
  45.                 methods: {
  46.                     add(){
  47.                         // this.info.push({id:this.id,name:this.name})
  48.                         this.info.unshift({id:this.id,name:this.name})
  49.                     },
  50.                 }
  51.             })
  52.         </script>
  53.     </body>
  54. </html>

vue第十一话 v-if 以及 v-show

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="vue.js"></script>
  7.  
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <input type="button" value="切换" @click="qiehuan"/>
  12.             <h3 v-if="flag">v-if 语句</h3>
  13.             <h3 v-show="flag">v-show 语句</h3>
  14.         </div>
  15.  
  16.         <!--
  17.         v-if 特点:每次都会重新删除或创建元素
  18.         有较高的切换性能消耗
  19.         如果元素设计到频繁的切换,最好不要使用v-if而推荐使用v-show
  20.  
  21.         v-show 特点:只是切换了元素的display:none的样式
  22.         有较高的初始渲染消耗
  23.         如果元素可能永远也不会被显示出来被用户看到,则推荐使用
  24.         v-if -->
  25.  
  26.         <script>
  27.             var vm = new Vue({
  28.                 el: '#app',
  29.                 data: {
  30.                     flag:true,
  31.                 },
  32.                 methods: {
  33.                     qiehuan(){
  34.                         this.flag = !this.flag
  35.                     }
  36.                 }
  37.             })
  38.         </script>
  39.     </body>
  40. </html>

vue 前端框架的更多相关文章

  1. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  2. 4.VUE前端框架学习记录四：Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  3. 3.VUE前端框架学习记录三：Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  4. 2.VUE前端框架学习记录二

    VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...

  5. 1.VUE前端框架学习记录一

    VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...

  6. 开发基于vue前端框架下的系统的UI自动化，记录总结踩的坑

    在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑. 无法用JS 修改标签属性,从而进行的操作 比如上传图片,我们的上传是这样子的 ...

  7. 自动化测试平台（Vue前端框架安装配置）

    Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...

  8. Vue前端框架基础+Element的使用

    前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...

  9. vue 前端框架 (三)

    VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. 从Java小白到阿里巴巴工程师，回顾我两年来的学习经历

    添加描述

  2. iOS CATransition 自定义转场动画

    https://www.jianshu.com/p/39c051cfe7dd CATransition CATransition 是CAAnimation的子类(如下图所示),用于控制器和控制器之间的 ...

  3. 核主成分分析方法（KPCA）怎么理解？

    先回顾下主成分分析方法.PCA的最大方差推导的结论是,把数据投影到特征向量的方向后,方差具有极大值的.假如先把数据映射到一个新的特征空间,再做PCA会怎样?对于一些数据,方差会更好地保留下来.而核方法 ...

  4. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  5. mysql-笔记-类型转化

    1 concat() 隐式转化为字符串 2 cast( 1 as char) 显示转化 3 比较中的隐式转化 null 与任何值比例都是null : 除了使用 null-safe <=> ...

  6. 仿 ELEMENTUI 实现一个简单的 Form 表单

    原文:仿 ElmentUI 实现一个 Form 表单 一.目标 ElementUI 中 Form 组件主要有以下 功能 / 模块: Form FormItem Input 表单验证 在这套组件中,有 ...

  7. codeforces131D

    Subway CodeForces - 131D A subway scheme, classic for all Berland cities is represented by a set of  ...

  8. 如何获得select被选中option的value和text

    如何获得select被选中option的value和text 一:JavaScript原生的方法 1:拿到select对象: var myselect=document.getElementById( ...

  9. MT【328】向量里的最佳逼近

    已知平面向量$\overrightarrow {a},\overrightarrow {b}$满足$|\overrightarrow {a}|=4,|\overrightarrow {b}|=2$.若 ...

  10. windows下安装oracle11g测试是否成功与监听器问题和网页控制台登录

    测试步骤1:请执行操作系统级的命令:tnsping orcl 测试步骤 2:请执行操作系统级的命令:sqlplus system/password@orcl 安装完oracle后要启动oracle服务 ...