vue基础:
0.插值表达式:{{}}
1.指令:
1.1 v-html,v-text
<
p
v-html=
"str"
></
p
>//用于绑定字符串,会自动解析标签
<
p
v-text=
"info"
></
p
>//用于绑定文本信息
1.2 v-on
<
div v-on:
click=
"fastClick"
>点我有惊喜
</
div
>
<
div @
click=
"fastClick"
>点我有惊喜
</
div
>//这是简写形式
1.3 v-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
1.4 v-show
与v-if相似,用于控制是否出现,v-show是状态的改变(display),而v-if是是否添加或删除节点元素。
<p v-show="isShow">我是P标签</p>
1.5 v-bind 用于绑定属性:
<
img
v-bind:src=
"img_url"
alt=
""
>
<div :id="boxid"></div>//这是简写方式
1.6 v-model//数据双向绑定
<
input
type=
"text"
name=
""
v-model=
"msg"
value=
""
>
1.6 v-for
<
div
v-for=
"(item,index) in lists" :
key=
"index"
>
{{index}} {{item}}
</
div
>
如果发现我们遍历的dom结构一样,只是数据不一样,就可以不用写key,默认不写就是就地复用
如果发现,我以后,需要对生成好的dom结构进行更改(删除、更改),最好给其加上key
2 组件
5种组件定义方式:
方式一:
//定义
var
logincomponents =
Vue.
extend({
template:
'<p>ads</p>'
})
//注册
Vue.
component(
'login',
logincomponents)
//使用时直接将login当标签使用。在挂载的根元素中使用<login></login>
方式二:将定义和注册写在一起
Vue.
component(
'login',{
template:
'<p>{{msg}}</p>',
data:
function(){
return {
msg:
'傻逼'
}
}
})
方式三:
<
script
id=
"template"
>
<
p
><
span
>{{
msg}}
</
span
></
p
>
<
/
script
>
Vue.
component(
'login',{
template:
'#template',
data:
function(){
return {
msg:
'傻逼'
}
}
})
方式四:
<
template
id=
"template"
>
<
p
><
span
>{{msg}}
</
span
></
p
>
</
template
>
Vue.
component(
'login',{
template:
'#template',
data:
function(){
return {
msg:
'傻逼'
}
}
})
方式五:
创建的是.vue文件
<template>
<div class="mui-content">
</div>
</template>
<style scoped>//使用scoped样式只会在当前主件中有效
</style>
<script>
//导入其它模块
import common from '../../common/common.js'
//导出Vue对象
export default{
// data:function(){ //es3
// return {
// }
// }
data(){
//es5
return {newslist:[] }},
created(){//Vue框架内部会自动调用 },
methods:{}
}
</script>
3 filter
//局部过滤器
var
vm =
new
Vue({
el:
'#app',
data:{
ss:
'ssss'
},
filters:{
//局部过滤器
upperCase(
data){
return
data.
toUpperCase();
}
}
})
//全局过滤器
Vue.
filter(
'toUpperCase',
function(
input){
return
input.
toUpperCase()
})
4 路由
使用路由需要导入路由组件
<
/
script
><
script
src=
"https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"
></
script
>
template中:
<
div
id=
"app"
>
<!-- 触发连接的代码 -->
<
router-link
to=
"/goodslist"
>商品列表
</
router-link
>
<
router-link
to=
"/newslist/1001"
>新闻列表
</
router-link
><
br
/>
<!-- 路由匹配到的组件将渲染在这里 -->
<
router-view
></
router-view
>
</
div
>
script中:
//1、定义组件(不要注册)
var
goodslistComponent =
Vue.
extend({
template:
'<ul><li>洗发水</li><li>三只松鼠</li><li>保暖内衣</li></ul>'
})
var
newsComponent =
Vue.
extend({
template:
'<ul><li>隧道出问题了{{$route.params.newId}}</li><li>冷空气来袭</li><li>携程事件</li></ul>'
})
//2.创建路由对象,设置好路由规则
var
router =
new
VueRouter({
routes:[
{
path:
'/',
redirect:
'/goodslist'},
{
path:
'/goodslist',
component:goodslistComponent},
//设置路由规则,就会注册组件
{
path:
'/newslist/:newId',
component:newsComponent}]})
//3.创建Vue实例,并且注入路由对象
var
vm =
new
Vue({
el:
"#app",
router:router
//把路由对象注入到根实例中,这样项目才拥有路由功能
})
5 网路请求
这同样需要引入主件:
<
script
src=
"https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"
>
<
/
script
>
var
vm =
new
Vue({
el:
"#app",
methods:{
getLogin:
function(){
var
url =
"http://127.0.0.1:3000/login?username=zhangsan&password=455"
this.
$http.
get(
url).
then(
function(
response){
console.
log(
response.
body)})},
PostLogin(){
var
url =
"http://127.0.0.1:3000/postLogin"
// emulateJSON:true//设置请求头
this.
$http.
post(
url,{
username:
'lisi',
password:
'magnmazi'},{
emulateJSON:
true}).
then(
function(
response){
console.
log(
response.
body)})},
jsonpDouban:
function(){
var
url =
"https://api.douban.com/v2/movie/top250"
this.
$http.
jsonp(
url).
then(
function(
response){
console.
log(
response.
body)
})}}})