vue

  • 使用虚拟dom操作减少真实dom操作 提高页面的渲染效率

    • 虚拟dom的本质就是内存中的一个对象,该对象和dom结构相互对应

  • 将开发者经历从dom中释放出来,转移到数据的操作

  • 开发者不需要关注页面的渲染,关注的是数据的变化,数据发生变化页面会自动刷新

引用   
<script src="vue.js"> </script>
el : 选择挂载元素

new Vue({
       el:"div",
       el:"#root",
       el:".my",
       el:document.querySelector("div"),// dom元素
       // el:"body",// 不允许 挂载到body html元素当中
       data:{
           userName:"laoli"
      }
  })
同一个页面当中可以包含多个VUE实例
 new Vue({
       el:"#one",
       data:{
           num:"one"
      }
  })
   new Vue({
       el:"#two",
       data:{
           num:"two"
      }
  })
如果多个实例均挂载到同一元素,则只识别第一个。
 new Vue({
       el:"#one",
       data:{
           num:"one"
      }
  })
   new Vue({
       el:"#one",
       data:{
           num:"two"
      }
  })
输出,比较,js逻辑{{}}
{{num}}  //1

     el:"#root",
       data:{
           num:1,
      }
  })

指令

指令:是以v-开头,是vue对HTML元素属性的扩展。 v-if:是一个布尔值,用于决定其包裹的内容是否渲染。 v-else-if:是一个布尔值,需要与v-if结合使用,用于决定其包裹的内容是否渲染。 v-else:与v-if或v-else-if结合使用。当上面的条件不满足足时,渲染其包裹的内容。 v-model:用于绑定你的data数据。用于表单元素。 .number:将元素的内容设置为number. .lazy:当失去焦点时,数据才会发生相对应的响应。 .trim:去除左右两侧的空格 。 v-show:值是一个布尔值。用于决定对包裹元素通过display来实现显示与隐藏。 v-bind:将属性与数据进行绑定。简写形式:冒号(:) v-on:绑定事件。简写形式:@ *:可以写方法;方法可以不用带括号。 *:可以写语句。 v-html:会将包裹的内容覆盖掉。可以识别你的元素标签。 v-text:会将包裹的内容覆盖掉。以文档的形式进行输出。 v-once:视图渲染只会响应一次。后续数据变化,包裹的内容不会再次响应。 v-pre:对包裹的内容不会进行响应解析。

v-for 列表渲染
  //对应的是 for in / of 循环
v-for = "数组里的每一项 in/of 要循环的数据"
<li v-for="item in arr">{{item}}</li>
循环数组 item index

循环对象 value key index
obj:{a:1,b:2,c:3}
<li v-for="(value,key,index) in obj">{{key}}:{{value}}-{{index}}</li>

循环数字
num:100
<li v-for="item in num">{{item}}</li>

循环字符串
str:‘asdfghjjkl’
v-if 条件渲染
v-if="true/false“,条件为真渲染,条件为假不渲染

//控制div在界面上的出现和隐藏
<div v-if="state"></div>

new Vue({
   el :"#app",
   data:{
state : true
  }
})
    <input type="text" v-model="sex">
   <div v-if="sex==1">男</div>
   <div v-else-if="sex==2">女</div>
   <div v-else>未知</div>

new Vue({
       el:"#root",
       data:{
           isLogin:true,
           sex:3,// 1 男 2 女 其它代表的是 未知
      }
  })
v-show
v-show 是通过display:none控制元素的在与不在
v-if 是直接渲染与不渲染
<div v-show="isShow" style="width:200px;height:200px;background:red;">
   </div>

new Vue({
       el:"#root",
       data:{
           isShow:false //相当于display:none
      }
  })
v-else
v-on:click 事件绑定
v-on:事件名 处理函数写在methods里 事件对象e
在事件中处理函数的默认参数是事件对象
传参,即没有事件对象了 如果需要用$event手动传递
$event 在vue中表示事件对象
简写:@click
v-bind 属性绑定
v-bind:要绑定的属性=“变量或者表达式”
src class style
  简写  :属性
 
<img v-bind:src="imgSrc" alt="">
   <img :src="imgSrc" alt="">  //简写
 
  new Vue({
       el:"#root",
       data:{
           imgSrc:"http://b.hiphotos.baidu.com/image/h%3D300/sign=ad628627aacc7cd9e52d32d909032104/32fa828ba61ea8d3fcd2e9ce9e0a304e241f5803.jpg"
      }
  })
v-model 双向数据绑定

v-model 实现双向数据绑定

通过v-model 将data里的数据和表单元素的value,data的数据是啥 表单的value就是啥

表单元素的value值发生改变 会影响data里的数据

data里的数据发生改变也会影响表单的value

使用方式

1 和表单元素一起使用

2.和组件一起使用

v-model = 事件绑定 input + value的属性绑定

input里输入内容
p标签显示什么内容
数据的绑定方式有2中
1.数据绑定到视图 {{}}
2.视图修改数据

<div id="app">
       <input type="text" name="" id="" v-model="msg">
       <hr>
       <p>{{msg}}</p>
   </div>
   <script>
       new Vue({
           el :"#app",
           data: {
              msg:"hehe"
          }
      })    
   </script>

.number - 输入字符串转为有效的数字
         
<input type="text" v-model.lazy="str">
   <div>{{str}}</div>
.lazy - 取代 input 监听 change 事件

.trim - 输入首尾空格过滤
v-html v-text
v-html : 可以渲染html的标签
v-text : 渲染的只是字符串

<div id='app'>
   <div v-text='string'>

   </div>
   <hr>
   <div v-html='string'>

   </div>
 </div>

new Vue({
 el:"#app",
 data:{
     string:"<h1>呵呵哒</h1>"
}

})
全局自定义指令
指令在谁身上使用 该元素就是被绑定的元素
调用 : v-“名字”
全局自定义指令:每个实例都能用 定义在new vue 前面
Vue.directive('hehe',{
   //配置项
   //插入方法
 inserted(el){
   // el 便是被绑定的dom元素
   el.focus()
   console.log('dom插入')
}
})
局部自定义指令
  • 在哪定义的在哪用

let  vm1=new Vue({
 el:"#app1",
 data:{
    name:'实例1'
},
 
 directives:{
   'hehe':{
     inserted(el){
        el.innerHTML='局部'
    }
  }
}

})
v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。

v-pre

跳过这个元素和它的子元素的编译过程。

#####

事件

* 1、事件绑定一个函数。函数可以带括号,也可以不带。

* 区别:带括号可以根据自身的需要传递数据。不带括号,默认传递的是事件对象

* 2、事件可以直接写JS语句,多条语句用分号分隔。

* 语句与JS不是完全互通的。

style
    <p style="background:red;color:yellow;">我现在挺好的,火车票也买好了,你买到了吗?</p>
<p :style="'background:red;color:yellow;'">我现在挺好的,火车票也买好了,你买到了吗?</p>
<p :style="st">我现在挺好的,火车票也买好了,你买到了吗?</p>
<p :style="{background:'red',color:'yellow'}">我现在挺好的,火车票也买好了,你买到了吗?</p>
<p :style="stObj">我现在挺好的,火车票也买好了,你买到了吗?</p>
<p :style="[bg,co]">我现在挺好的,火车票也买好了,你买到了吗?</p> new Vue({
el:"#root",
data:{
bg:{
background:"green"
},
co:{
color:"orange"
},
st:"background:red;color:yellow;",
stObj:{
background:"red",
color:"yellow"
}
},
methods:{ }
})
class
    <style>
.bg{
background:red;
}
.co{
color:yellow;
}
</style> <p class="bg co">我确定你就是那只匹着羊皮的狼。</p>
<p :class="bgco">我确定你就是那只匹着羊皮的狼。</p>
<p :class="myBg">我确定你就是那只匹着羊皮的狼。</p>
<p :class="myCo">我确定你就是那只匹着羊皮的狼。</p>
<p :class="[myBg,myCo]">我确定你就是那只匹着羊皮的狼。</p>
<!--bg指的是样式的名字。属性值是一个布尔值,如果为true则样式生效,否则不生效-->
<p :class="{bg:true,co:true}">我确定你就是那只匹着羊皮的狼。</p>
<!--属性名就是你最终的样式名。样式是否采用要看属性值是否为true-->
<p :class="{'bg co':true}">我确定你就是那只匹着羊皮的狼。</p>
<p class="bg">我确定你就是那只匹着羊皮的狼。</p> new Vue({
el:"#root",
data:{
myBg:"bg",
myCo:"co",
bgco:"bg co"
},
methods:{ }
})

组件式开发

将页面分割成小零件(组件),将零件进行拼装,一样的可以复用

组件

组件:是对元素标签的一个扩展。component

使用组件的原因:提高代码的复用性

  1. 必须使用连字符命名,如:my-compoent

  2. template中的内容必须要用dom元素包裹

  3. 组件的定义中,还可以有data,methods,computed

  4. data必须是一个方法

全局组件
//1、创建组件;
let component = Vue.extend({
   template:'<h1>组件1</h1>'
})
//2、注册组件;
Vue.component("名字",component)
//3、使用组件
组件名当做标签名来使用
局部组件
//1、创建组件;
let component = Vue.extend({
   template:'<h1>组件1</h1>'
})
//2、注册组件;
//在配置项中
components:{
       "名字":component;
  }
//3、使用组件
组件名当做标签名来使用
  • 区别:注册的位置

组件的简写
//将组件的创建和注册合并到一起
Vue.component('hehe',{
 template:'<h1>

vue入门,vue指令,vue组件,vue模板的更多相关文章

  1. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

  2. Vue入门---常用指令详解

    Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...

  3. vue入门之单文件组件

    介绍 在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多 ...

  4. VUE入门实例,模版组件用法

    这里每一个例子可以直接拷进body运行. 本系列为学习记录,并非大神教学案例. 仅仅整理用法,至于VUE的原理,设计模式等等暂不讨论,文中如有不对,还请大家帮忙指正,万分感激. 下一篇会写父子组件交互 ...

  5. vue入门-常用指令操作

    指令:v-xx组成的特殊指令,如果一个标签中有指令会默认替换原有的书 v-model:实现数据和视图的双向绑定 v-text:在元素中插入值 v-html:在元素中插入标签或者插入文本 v-if:根据 ...

  6. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  7. Vue入门学习总结一:Vue定义

    Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改. 首先我们需要在script中定义一个Vue实例,定义方法如下: var v ...

  8. Vue最全指令大集合————VUE

    # Vue指令大集合(无slot) #### 包含内容: 1. v-cloak2. v-html3. v-text4. v-bind5. v-show6. v-model7. v-for8. v-if ...

  9. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  10. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. day7_python之面向对象高级-反射

    反射:通过字符串去找到真实的属性,然后去进行操作 python面向对象中的反射:通过字符串的形式操作对象相关的属性.python中的一切事物都是对象(都可以使用反射) 1.两种方法访问对象的属性 cl ...

  2. 洛谷 2403 [SDOI2010] 所驼门王的宝藏

    题目描述 在宽广的非洲荒漠中,生活着一群勤劳勇敢的羊驼家族.被族人恭称为“先知”的Alpaca L. Sotomon是这个家族的领袖,外人也称其为“所驼门王”.所驼门王毕生致力于维护家族的安定与和谐, ...

  3. OpenCV 安装与调试

    Visual Studio 是微软提供的面向任何开发者的同类最佳工具. OpenCV(开源计算机视觉库)是一个开源的计算机视觉和机器学习软件库. 目前最新版本:Visual Studio 2019.O ...

  4. 2019-10-24-dotnet-列表-Linq-的-Take-用法

    title author date CreateTime categories dotnet 列表 Linq 的 Take 用法 lindexi 2019-10-24 9:4:23 +0800 201 ...

  5. mac默认截图、截图代码

    苹果系统自带截图功能   1 截取全屏:快捷键(Shift+Command+3) 直接按“Shift+Command+3“快捷键组合,即可截取电脑全屏,图片自动保存在桌面. 2 截图窗口:快捷键(Sh ...

  6. golang http get请求方式

    client := &http.Client{} //生成要访问的url,token是api鉴权,每个api访问方式不同,根据api调用文档拼接URLurl := fmt.Sprintf(&q ...

  7. Spring Security原理篇(一) 启动原理

    1.概述 spring security有参考的中文翻译文档https://springcloud.cc/spring-security-zhcn.html 在学习spring security的时候 ...

  8. linux inode 结构

    inode 结构由内核在内部用来表示文件. 因此, 它和代表打开文件描述符的文件结构是不 同的. 可能有代表单个文件的多个打开描述符的许多文件结构, 但是它们都指向一个单个 inode 结构. ino ...

  9. git如何移除某文件的版本控制

    1:还没有加到版本控制中 (1)还没有git  add 在   .gitignore中添加 (2)已经git add 先   git  rm  -r  --cached   文件 在   .gitig ...

  10. Android程序分析环境(搭建步骤略)

    1:安装JDK JDK(Java Development Kit) 是 Java 语言的软件开发工具包(SDK).没有JDK的话,无法编译Java程序. 2:安装Android  SDK Androi ...