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

Posted sll-csdn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的第二十二篇博客---VUE相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于我的第二十二篇博客---VUE的主要内容,如果未能解决你的问题,请参考以下文章

开始写游戏 --- 第二十二篇

第二十二篇 ResNet实战

第二十二篇 信念

Xamarin效果第二十二篇之录音效果

C++进阶第二十二篇——unordered_map和unordered_set(容器接口介绍和使用+底层代码实现)

Django 第二十二篇ModelForm