Vue2.0基础(一)

Vue2.0基础(一)

image

搭建项目

mkdir vue-demo
cd vue-demo
npm init -y

vue官网下载vue.js

创建相关目录

├── assets
│   ├── css
│   └── js
│       └── vue.js
├── example
├── index.html
└── package.json

安装live-server

cd vue-demo
live-server

创建hello-world.html

cd example
touch hello-world.html

hello-world.html

  
  
  
  


  
hello world
  

  
{{message}}
  

index.html

  
  
  


  
vue2.0实例
  

  

    
hello world 实例
  

效果

174

v-show v-if v-else

相同点：v-if与v-show都可以动态控制dom元素显示或隐藏

不同点：v-if显示隐藏是将dom元素添加或删除，而v-show是为该元素添加css(display: none;)，dom元素还在

使用场景：v-if有更高的切换消耗，适合不大可能经常改变的情况；v-show有更高的初始渲染消耗，适合频繁切换

cd example
touch v-if.html

v-if.html

  
  
  
  


  
v-if v-else v-show 实例
  

  

    
v-if 显示
    
v-if 隐藏
    
v-show
  
  

效果

175

v-for

touch v-for.html

v-for.html

  
  
  
  


  
v-for 实例
  

  

    

      
{{item}}
    
  
  

效果

176

v-text v-thml

当网络很慢或js出错时，会显示出{{xxx}}。为解决这个问题，v-text、v-html应运而生

v-text：渲染普通文本，不解析标签

v-html：解析标签并渲染文本数据

touch v-text.html

v-text.html

  
  
  
  


  
v-text v-html 实例
  

  

    
{{message}}下面等效
    

    
少用v-html 可能引起xss攻击
    

  
  

效果

177

v-on(@)

绑定事件

v-on.thml

    
    
    


    
v-on 绑定事件
    

    

        考试得分： {{count}}

        加分
        减分
    

    

效果

178

简写

加分

绑定其他事件

v-modal

数据双向绑定

v-model.html

  
v-model内容：{{message}}
  
文本框
  
v-model输入: 

js

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})

效果

182

修饰符

• .lazy change 事件之后进行同步数据
• .number 输入值自动转为数值类型，若值无法被 parseFloat() 解析，则会返回原始的值
• .trim 自动过滤输入值的首尾空白字符

v-bind(:)

绑定数据和元素属性

元素属性

v-bind.html

js

const app = new Vue({
  el: '#app',
  data: {
    imgUrl: 'https://gitee.com/itxing666/blog-images/raw/master/img/code.png'
  }
})

绑定数据

绑定className
isOk判断绑定class
三元表达式判断
绑定class数组
运算
绑定方法
绑定对象

v-pre v-cloak v-once

v-pre

原样输出

html

{{ message }}

js

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  }
})

效果

184

v-cloak

网速慢时，页面会闪现标签里插值表达式，例如{{ message }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标签会自动消失变回显示

style

html

{{ message }}

v-once

只渲染一次

html

第一次绑定的值：{{message}}

效果

185