我的第二十二篇博客---VUE

Posted 2021-12-07 sll-csdn

Vue.js基本概念：
首先通过将vue.js作为一个js库来使用，来学习vue的一些基本概念，我们下载了vue.js后，需要在页面上通过script标签引入vue.js。开发中可以使用开发版本vue.js。产品上线要换成vue.min.js。

<script type="text/javascript" src="../static/js/vue.js"></script>
Vue实例

每个Vue应用都是通过实例化一个新的Vue对象开始的：

<div id="app">
{{message}}
<button @click=‘change‘>改变message的值</button>
</div>

window.onload=function(){
#vm这个变量名不能用-，可以用下划线，比如vm-data不行，vm_data可以
var vm= new Vue({
el:"#app",
data:{message:‘hello world!‘},
methods:{
change:function(){
this.message=‘hello python‘
}
}
})
}
...

<div id="vue_det">
<h1>site:{{site}}</h1>
<h1>url:{{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#vue_det",
data:{site:"积云教育",url:‘www.runoob.com‘},
methods:{
details:function(){
return this.site+"-学的不仅是技术，更是梦想！"
}
}
})
</script>

 

button:

<div id="a">
{{m}}
<button @click=‘change‘>点击反转</button>
</div>
<script type="text/javascript">
export default{
name:"a",
data:function(){
return{
m:"asd"
},
methods:{
change:function(){
this.m=this.m.split("").reverse().join("")
}
}
}
}
</script>

 

v-for:

<tr v-for="x in m">
<td> {{x[‘id‘]}}</td>
</tr>

<script>
export default{
name:"a",
date:function(){
m:[{字典}]
}
}

 

再用到这三个的时候你那个div必须放在一个大的div里面！！！！！！！

v-html:

<div id="a">
<div v-html="m"></div>
</div>
在下面赋值时就给m赋值即是该div里的内容，
<script type="text/javascript">
window.onload=function(){
var v=new Vue({
el:"#a",
data:{m:"lalala"}
})
}
</script>

v-bind:
<style>
.a{background-color:red;}
</style>

<div id="#a">
<div v-bind:class="a"> //这里的class是css类型，当然也可以是id,后面那个a其实就是个形参，可以取任意名字，就跟{{m}}这里面的m一样，要在vue里的data里面给他赋值，然后就可以用css选择器对网页做一些调整啦
lalalala
</div>
</div>

<script type="text/javascript">
window.onload=function(){
var v=new Vue({
el:"#a",
date:{a:"aa"}
})
}
</script>

 

 

当赋值的内容不含有标签时两个无区别
当有标签的时候{{}}不能解析标签
就要用v-html

<div v-html=‘m‘></div> 结果是一个空行
<div id="a">{{m}}</div> 结果是<p></p>
<button @click=‘c‘>ss</button>

<script type="text/javascript">
window.onload=function(){
var v=new Vue({
el:"#a",
data:{m:‘<p></p>‘}
methods:{
c:function(){
this.m=‘asd‘
}
}
})

</script>

 

 

<div v-if="ok">
asdjdsads
</div>

data:{ok:true}
这个div就会显示出来
如果是false就不会显示

 

定义变量

const t=1
在下面不能改变t的值
let a=1
只能定义一次a
var a=1
无限制

写到js里
let name=‘张三‘
var person={
name:name,
age:20,
getname:function(){
return this.name
}
}
alert(person.getname())

弹出张三

要想在服务中调用必须在最后一行加上
export default(person)
在html里不能用

在vue里面写
<script>
import person from ‘../../static/main‘
alert(name)
弹出张三

 

特殊的{{}}

{{5+5}} 直接在页面上显示10
{{ok ? ‘yes‘:‘no‘}} 当你在vue里的data给ok赋值的时候给的true页面显示的就是yes 赋值是false时显示的就是no 也就是三目运算

三目运算在动态绑定时要以数组的形式 如下！！！
然后b也不是字符串类型 不然this.b=!this.b没有用

<div v-bind:class="[b?‘m1‘:‘m2‘]">
我是
</div>
<button @click=‘change‘>点击</button>

<script>
data:function(){
return{
b:true
},
methods:{
change:function(){
this.b=!this.b
}
}
}
<style>
.m1{
background-color:pink;
}
.m2{
background-color:blue;
}
</style>