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>
原文地址：https://www.cnblogs.com/sll-csdn/p/10926050.html