基本语法
<body>
<script src="vue.js"></script>
<div id="app">
{{ msg }}
<div v-html='html'>
<input type="button" value="改变" @click="fc">
<div class="box" :class="{active:is_ok}" :class="['active']"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
html:"<p>hello</p>",
msg: 'hello',
is_ok: false
},
methods: {
fc: function () {
this.msg = 'ssss'
}
}
})
</script>
|
v-text相当于innerText
|
|
v-html相当于innerHTML
|
|
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
<h1 v-if="age>15">{{ age }}</h1>
<h2 v-else-if="age<15">二标签</h2>
<h3 v-else>三标签</h3>
<div v-show='true'>
<h1>1111</h1>
</div>
|
|
v-bind可以绑定标签中任何属性 v-bind:src 等价于 :src
|
| v-on 可以监听 js中所有事件 v-on:click 等价于 @click |
|
class 两种绑定方式:
1. :class="{active:is_ok}"
2. :class="['active']"
三元运算符
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
|
|
事件处理
阻止单击事件继续传播
<a v-on:click.stop="fun"></a>
提交时间不在重载页面
<form v-on:submit.prevent="onSubmit"></form>
串联
<a v-on:click.stop.prevent="fun"></a>
|
循环
<ul>
<li v-for="(list,index) in list_all">
{{ index+1 }}--{{ list }}
</li>
</ul>
|
|
表单输入绑定(用v-model)
<input type="text" v-model="username">
<textarea v-model="info"></textarea>
|
|
单选框绑定
{{ xb }}
<input type="radio" value="0" name="gender" v-model="xb">男
<input type="radio" value="1" name="gender" v-model="xb">女
|
多选框
<input type="checkbox" value="study" name="gender" v-model="xb">学习
<input type="checkbox" value="practice" name="gender" v-model="xb">练习
xb: []
|
<select v-model="xb">
<option value="0">bbb</option>
<option value="1">jjj</option>
<option value="2">sss</option>
<option value="3">hhh</option>
</select>
|
|
计算属性和监听属性
计算(vue推荐方法)
computed: {
fnc() {
return this.msg.split('').reverse().join('')
}
}
监听:
computed: {
fnc() {
return this.msg.split('').reverse().join('')
}
},
watch: {
msg:function(newVal, oldVal) {
alert(newVal + ' ' + oldVal)
}
}
|
|
过滤器
<div id="app">
{{ price | US | Yuan }}
</div>
<script>
//全局
Vue.filter('Yuan', function (value) {
if (value == '') {
return
}
return value + '美元'
})
//内部
var vue = new Vue({
el: "#app",
data: {
price: 99.9
},
filters: {
US: function (value) {
return '$' + value
}
}
})
</script>
|
|
axios(ajax)
var demo = new Vue({
el: "#app",
data: {
list_data: [],
list: [1, 2, 3, 4]
},
mounted: function () {
axios({
method: 'get',
url: '/1',
}).then(
//function (dat) {
//demo.list_data = dat.data
// }
dat => {
this.list_data = dat.data
}
).catch(function (error) {
console.log(error)
})
}
})
|
组件-基础 (面包屑导航)
<style>
.crumb {
90%;
line-height: 50px;
margin: 0px auto;
border-bottom: 1px solid #ddd;
}
</style>
<body>
<div id="app">
<breadcrumb></breadcrumb>
</div>
<script>
Vue.component('breadcrumb', {
template: '<div class="crumb">当前位置是:首页>新闻列表</div>'
})
var vm = new Vue({
el: '#app',
})
</script>
|
组件02
<style>
.crumb {
90%;
line-height: 50px;
margin: 0px auto;
border-bottom: 1px solid #ddd;
}
.hot {
color: red;
font-weight: bold;
text-indent: 10px;
}
</style>
<body>
<div id="app">
<breadcrumb pos="首页>新闻"></breadcrumb>
</div>
<script>
Vue.component('breadcrumb', {
props: ['pos'],
template: '<div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">{{ pos }}</div>',
// 独立的数据function(){return{name:'aa'}} 共享数据 : data:{}
data: function () {
return {
isHot: true,
}
}
})
var vm = new Vue({
el: '#app',
})
</script>
|
|
vue 跨域解决方法
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:7001',//后端接口地址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/apis': '',//重写,
}
}
},
|
| |
| |