vue快速入门
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
A
B
C
Not A/B/C
1.4 v-show
与v-if相似，用于控制是否出现，v-show是状态的改变（display），而v-if是是否添加或删除节点元素。
我是P标签
1.5 v-bind 用于绑定属性：
<
img
v-bind:src=
"img_url"
alt=
""
>
//这是简写方式
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:
'
ads
'
})
//注册
Vue.
component(
'login',
logincomponents)
//使用时直接将login当标签使用。在挂载的根元素中使用
方式二：将定义和注册写在一起
Vue.
component(
'login',{
template:
'
{{msg}}
',
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文件
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
>
//1、定义组件（不要注册）
var
goodslistComponent =
Vue.
extend({
template:
'
- 洗发水
- 三只松鼠
- 保暖内衣
})
var
newsComponent =
Vue.
extend({
template:
'
- 隧道出问题了{{$route.params.newId}}
- 冷空气来袭
- 携程事件
})
//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)
})}}})