vue入门，vue指令，vue组件，vue模板
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
使用组件的原因：提高代码的复用性
必须使用连字符命名，如：my-compoent
template中的内容必须要用dom元素包裹
组件的定义中，还可以有data，methods，computed
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>最新文章
- JQuery demo
- Silverlight 使用IsolatedStorage新建XML文件，并且用LINQ查询XML
- 5.迪米特法则（Law Of Demeter）
- Tuple类型
- Java泛型：类型擦除
- [JS]Cookie精通之路
- PHP mail详细示例
- JS截取字符串：slice(),substring()和substr()
- Spring3 MVC请求参数获取的几种场景
- Windows Server 2008安装 百度Wifi \ 360Wifi \ 小米Wifi 失败的解决方法
- 关于 CentOS 自启动（服务、脚本）
- 监控 monitor java 代码
- java基础概念
- Java——代码块
- Hadoop生产环境配置文件
- 【thinkphp5】安全建议：隐藏后台登录入口地址
- LeetCode in action
- laravel在控制器中动态创建数据表
- Linux：Apache安装与启动
- TSQL--TOP选项
热门文章