Web前端-Vue.js必备框架（一）

Web前端-Vue.js必备框架（一）

 
 




 
{{ message }}
 
 
  {{ $data | json }}
 

 
 
  
  
 



 

  
dashucoding
  
  Send
 
 
 
{{ $data | json }}

v-show和v-if使用第一个整体元素还存在，使用第二个整体都不存在了。

 
 
 




 

  Submit
 

组件化

什么是Vue.js？是目前最火的框架，React是最流行的框架，打包工具Webpack，目前三大主流Vue.js，Angular.js，React.js框架。

Vue.js构建用户界面框架，注重视图层。

React开发网站，开发手机APP

Vue可以用于开发APP，需要Weex

MVC 是 后端开发的概念
MVVM，视图层分离
Model, View, VM ViewModel

MVVM的案例：

v-cloak

[v-clock]{
 display: none;
}


v-text v-html v-bind: v-on

事件修饰符

v-on
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 使用事件捕获模式
.self 只当事件在该元素本身触发时回调
.once 事件只触发一次

实例：Vue.js只关注视图层

 
 {{ message }} 

下载地址：
https://vuejs.org/js/vue.min.js

  {{ message }}


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

  
    鼠标悬停
  

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

  
看到我了


var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

条件循环

  

    

      {{ do.text }}
    
  


var app = new Vue({
  el: '#app',
  data: {
    dos: [
      { text: 'JavaScript' },
      { text: 'Vue' },
      { text: '项目' }
    ]
  }
})

// v-on 添加一个事件监听器

  
{{ message }}
  消息


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  },
  methods: {
    Message: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

  
{{ message }}
  


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

组件

Vue.component('do-item', {
  template: '
dashucoding
'
})

 

 
  


var app = new Vue({
  el: '#app',
  data: {
    List: [
      { id: 0, text: '1' },
      { id: 1, text: '2' },
      { id: 2, text: '吃的东西' }
    ]
  }
})

计算器：

 
 
    + 
    - 
    × 
    ÷ 
 

  
  
  

添加class类样式

style

v-for

 //
{{list[0]}}
 
 {{item}} 
 
 {{item}} 


{{count}}

v-if 不断创建和删除，不利于重复使用渲染
v-show 不会删除DOM

v-cloak v-text v-bind v-on
v-bind :
v-on @
v-model : 表单元素
v-for
v-if
v-show
// 事件修饰符
.stop .prevent
.capture
.self
.once

v-for 使用key属性 string/number

创建一个Vue

var vm = new Vue({

})

var data={a:1};
var vm = new Vue({
 data: data
})
vm.a == data.a // true

生命周期图示

数据绑定

 {{msg}} 

v-once执行一次
 {{msg}} 


...


...


...


...

目录	说明
build	项目构建
config	配置目录
mode_modules	npm加载的项目依赖模块
src	开发的目录
static	静态资源目录
test	初始测试目录
index.html	入口文件
package.json	项目配置文件

实例：

    
{{site}}
    
{{url}}
    
{{det()}}

v-html="message"

v-bind:class="{'class1': use}"

v-bind:id="id"



v-if="seen"

123

    
{{ message }}
    

    

v-if v-else v-else-if


  

    

     {{ n }}
    
  


 

  {{ message.split('').reverse().join('') }}

Vue代码

  

    
{{ msg }}
  

  

v-cloak, v-bind:, v-on: 学习

  

    
    
 {{ msg }} 
    
1
    
    

    
{{msg2}}
    

    
111
    
    
    
    

    
  
  
  

倒序效果

  
  

    
    
    
{{ msg }}
  

  

事件修饰符

.stop 阻止冒泡
.prevent 阻止默认行为
.capture 实现捕获事件的机制
.self 实现只点击当前元素，才会触发事件
.once 只触发一次事件

v-model 指令

  
  
  
  
  



  

    
{{ msg }}
    
  

  

计算器

var Str = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
this.result = eval(Str)

  
  
  
  
  



  

    

    
      +
      -
      *
      /
    

    

    

    
  

  

vue样式

 绑定数组

 三元表达式

123

  

样式：




  
  
  
  
  



  

    

    
123
  

  

for 循环

// 数组对象




  
  
  
  
  



  

    
{{ item.id }} - {{ item.name }} - {{i}}
  

  

  
  
  
  
  



  


    
{{i}} - {{item}}

  

  

// 循环对象




  
  
  
  
  



  

    
{{ val }} -- {{key}} -- {{i}}
  

  

// 迭代数字




  
  
  
  
  



  

    
 {{ count }} 
  

  

key属性使用

 {{item.id}} --- {{item.name}}


add() { 
 this.list.unshift({ id: this.id, name: this.name })
}

v-if 每次都会重新删除和创建元素，性能消耗高
v-show 每次不会重新创建，初始渲染消耗高

vue 中绑定样式两种方法：

v-bind: class     v-bind:style

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。