1.JS与vue的双向数据绑定
<body>
<h2>js完成双向数据绑定</h2>
<div id='app1'>
<input type="text" id='input' name="">
<p id='p1'></p>
<p id='p2'></p>
</div>
<h2>使用vue完成双向数据绑定</h2>
<div id="app">
<input type="text" name='' v-model='inputVal'>
<h4>{{inputVal}}</h4>
</div>
</body>
<script type="text/javascript">
//============================================ js实现双向数据绑定:
// 实时的获取input中输入的数据 使用oninput事件:当输入数据的时候触发
let input=document.getElementById('input')
let p1=document.getElementById('p1')
let p2=document.getElementById('p2')
// 给输入框绑定oninput事件
input.oninput=function(){
let inval=input.value;
p1.innerHTML=inval;
p2.innerHTML=inval;
}
// ==============================================vue实现双向数据绑定
// 使用vue中的一个指令:v-model 双向数据绑定 v-mode写在input中的
// vue中有很多 指令 指令都是写在标签中的
new Vue({
el:'#app',
data:{
inputVal:''
}
})
</script>
文本框输入什么小米的元素就显示什么
2.m v vm 原理
<script type="text/javascript">
// vue中的模式:M V VM和mvc原理差不多
// 1.view层 v
// 视图层,就是在前端中我们是的dom层,主要的作用是用于给用户展示各种信息
// 2.model层 m ->data:{}
// 数据层,数据可以是我们自己定义的数据,或者是从网络上请求回来的数据
// 3.viewmodel层 vm m v vm
// 视图模型层,v和m层的沟通桥梁,一方面实现了数据源绑定,将model的改变实时的响应
// 到view层,另一方面实现了dom的监听,dom发生改变可以对应改变数据
</script>
3.VUE插值语法
<body>
<div id='app'>
<!-- 在{{}} 中写data中的数据 -->
<p>{{a}}</p>
<!-- {{}}里边可以使用算数运算符 -->
<p>{{b+5}}</p>
<p>b+5={{b+5}}</p>
<!-- {{}}中可以使用三元运算符 -->
<p>{{c==1?'男':'女'}}</p>
{{bool?'真':'假'}}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
a:'abc',
b:13,
c:0,
bool:true
}
})
</script>
4.v-pre 和 =v-html 和v-text
body>
<div id='app'>
<!-- =================================== v-pre 指令 原样输出 -->
<!-- 当前使用该指令的元素及所有子元素都会应用于该指令 -->
<p>{{a}}</p>
<p v-pre>
{{b}}{{str}}
<span>{{abc}}</span>
</p>
<!--
{{}}如果渲染的数据是标签(超链接),默认是不解析的为了防止XSS攻击
XSS攻击:通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页
-->
<!-- =================================v-html 可以解析html代码 -->
<!--
语法格式:
<元素 v-html='vue中data中的数据'></元素>
-->
<p>{{b}}</p>
<!--<a href="http://www.baidu.com">百度</a>-->
<p v-html='b'>{{b}}</p>
<!--百度(一个超链接)-->
<p v-html="c"></p>
<!-- 文本插值指令 =========================v-text 等价于{{}} -->
<p>{{a}}</p>
<p v-text="a">{{b}}</p>
<!-- 渲染的时候先渲染{{}}中的b 再去执行v-text指令,会替换{{}}中渲染的数据 -->
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
a: 'a变量',
b: '<a href="http://www.baidu.com">百度</a>',
c: '<h1>我是一级标签</h1>'
}
})
</script>
5.vue中的斗篷 v-cloak
<head>
<title>vue中的斗篷 v-cloak</title>
<meta charset="utf-8">
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<!--
斗篷:cloak 美[kloʊk]
1.定义一个css样式表
语法格式:
[v-cloak]{属性:属性值;display:none;}
2.指令:v-cloak 特点:当vue框架加载完成后,自动清除css样式表中的属性
指令的语法格式:
<元素 v-cloak></元素>
定义:
由于网络原因,导致vue框架文件没有及时的加载进来,如果vue没有加载进来,
{{}}中的语法会没解析,{{name}},等在vue.js文件加载完成后,在出现渲染
-->
<div id='app'>
<p v-cloak>{{name}}</p>
<p>hahaha</p>
</div>
</body>
<!-- 将来我们在工作的时候,引入外部的js文件,一般写在下边,因为代码是自上向下指定,如果网络不给力,会影响页面的渲染 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:'hahaha'
}
})
</script>
6.v-if 和v-show
<body>
<div id="app">
<!--
v-if
用于狂战元素的显示或隐藏,v-if的指令值是布尔类型
如果值为true表示显示 如果只为false 删除该节点
v-show
用于控制元素的显示或隐藏,v-show的指令值是布尔类型
如果值为true表示显示 如果只为false表示不显示(display:none)
-->
<p v-if='true'>v-if='ture'{{name}}</p>
<p v-if='bool'>v-if='bool'{{name}}</p>
<p v-if='num==1'>v-if='num==1'{{name}}</p>
<p v-show='false'>v-show='false'{{name2}}</p>
<p v-show='bool'> v-show='bool'{{name2}}</p>
<p v-show='num==2'>v-show='num==2'{{name2}}</p>
<!--
v-if和v-show的区别:
v-if 会在值为false的时候,删除指定的节点
v-show 是在元素中添加一个display:none的属性,让元素隐藏
使用时机:
如果频繁的对元素进行显示或不显示操作,就是用v-show
如果少量的不显示指定元素,就使用v-if
-->
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
name:'小花花',
name2:'小绵绵',
bool:false,
num:2
}
})
</script>
7.事件绑定 v-on
<div id='app'>
<!--
通过按钮 控制元素的显示或隐藏
vue中事件的绑定:
v-on指令
语法格式:
v-on:事件名称='对应的方法'
简写为:
@事件名称=方法 推荐使用
-->
<button v-on:click='fun()'>点击隐藏</button> <!--点击后将p标签隐藏了 -->
<button @click='fun1()'>点击我</button><!--点击后弹出alert -->
<p v-if='bool'>{{name}}</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name: '小翠翠',
bool: true
},
// vue中定义方法的方式
methods: {
/*
方法名: function () {
}
*/
fun: function () {
// 获取当前对象中data中的值 this
// let name = this.name;
// console.log(name);
this.bool = false;
},
fun1:function(){
alert('我被执行了')
}
}
})
</script>
8.vue选项卡案例
<body>
<div id='app'>
<button @click='fun(1)'>娱乐新闻</button>
<button @click='fun(2)'>八卦新闻</button>
<button @click='fun(3)'>体育新闻</button>
<p v-show='num==1'>我是娱乐新闻的信息</p>
<p v-show='num==2'>我是八卦新闻的信息</p>
<p v-show='num==3'>我是体育新闻的信息</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
num:1
},
methods:{
fun:function(num){
console.log(num);
this.num=num;
}
}
})
</script>
9.VUE函数的调用
<body>
<div id="app">
{{fun(18)}}<!-- 结果为:20 -->
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
name:'admin'
},
methods:{
fun:function(age){
console.log('我是fun函数被调用了');
return this.fun2(age)
},
fun2:function(age){
console.log('我是fun2函数被调用了');
return age+2;
}
}
})
</script>
10. 标签属性支持vue --- v-bind
<body>
<div></div>
<div id="app">
<!--
绑定属性:v-bind 指令:可以让属性支持vue语法
简写为:
:属性
-->
<a v-bind:href="aHref">百度</a>
<a :href="aHref2">淘宝</a>
<img :src="img" alt="">
<button @click='bian()'>{{str2}}</button>
<!-- 点击按钮调用bian() 根据条件修改str2和str的值 -->
<a :href="num==true?aHref:aHref2">{{str}}</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
aHref: 'http://www.baidu.com',
aHref2: 'http://www.taobao.com',
img: 'https://img1.baidu.com/it/u=920361034,2356219527&fm=26&fmt=auto&gp=0.jpg',
num: true,
str: '百度',
str2:'变淘宝'
},
methods: {
bian: function () {
// 每嗲用一次给num取反
this.num =!this.num ;
if(this.num==true){
this.str='百度'
this.str2='变淘宝'
}else{
this.str='淘宝'
this.str2='变百度'
}
}
}
})
</script>