vue入门001

最新推荐文章于 2025-08-08 17:07:36 发布

weixin_30515513

最新推荐文章于 2025-08-08 17:07:36 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bevis126/p/9518849.html

一、vue + webpack打造todo应用教程sudo yum install nodejs
vue:
读音: v-u-e
view

vue到底是什么?
一个mvvm框架(库)、和angular类似
比较容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官网: http://cn.vuejs.org/
手册： http://cn.vuejs.org/api/

vue和angular区别?
vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目

适合: 移动端项目,小巧

vue的发展势头很猛，github上start数量已经超越angular
angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护

合适: pc端项目

共同点: 不兼容低版本IE
-------------------------------------------
vue基本雏形:
angular展示一条基本数据:
var app=angular.module('app',[]);

app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})

html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>

var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});
常用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

$scope.show=function(){}
指令: 扩展html标签功能,属性

v-model 一般表单元素(input) 双向数据绑定

循环: //2版本里已经废除 $index ,$key

v-for="(name,index) in arr"
{{ name }} {{ index }}

v-for="(k,v,index) in json"
{{k}} {{v}} {{index}}

事件:
v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法
alert(1);
}
}
});
显示隐藏:
v-show=“true/false”
bootstrap+vue简易留言板(todolist):

bootstrap: css框架跟jqueryMobile一样
只需要给标签赋予class，角色
依赖jquery

确认删除？和确认删除全部么?
-----------------------------------------
事件:
v-on:click/mouseover......

简写的:
@click="" 推荐

事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.keyCode
@keyup

常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
-----------------------------------------
属性:
v-bind:src=""
width/height/title....

简写:
:src="" 推荐

<img src="{{url}}" alt=""> 2版本效果出不来，报一个404错误

<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求

-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

第一种：
:class="[red]" red是数据 //先定义样式，再定义数据，再标签内引用
:class="[red,b,c,d]"

<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.red{
color:red;
}
.green{
border-color: green;
}
</style>
<script src="lib/vue.js"></script>
<script>
window.onload = function () {
var vm = new Vue({
el:'#app',
data:{
a:'red'
},
methods: {

}
})
}

</script>
</head>
<body>
<div id="app">
<h3 :class="[a]">标题</h3>
</div>

第二种：

:class="{red:a, blue:false}"

第三种：
:class="json"

data:{
json:{red:a, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 复合样式，采用驼峰命名法
:style="json"
-----------------------------------------
模板:
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次 2版本已经不能用了，用 <h3 v-once>{{msg}}</h3>

{{{msg}}} HTML转意输出
-----------------------------------------
过滤器:-> 过滤模板数据
系统提供一些过滤器: 1.x版本的语法，2.x已经不适用

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize

currency 钱

....

2.x用下面的过滤器

替换 json 过滤器
不用一个个改，因为 Vue 已经帮你自动格式化好了，无论是字符串，数字还是数组，对象。如果想用 js 的 JSON.stringify 功能去实现，你也可以把它写在方法或者计算属性里面。

替换 capitalize 过滤器
text[0].toUpperCase() + text.slice(1)

替换 uppercase 过滤器
text.toUpperCase()

替换 lowercase 过滤器
text.toLowerCase()

替换 pluralize 过滤器
NPM 上的 pluralize 库可以很好的实现这个功能。如果仅仅想将特定的词格式化成复数形式或者想给特定的值 (‘0’) 指定特定的输出，也可以很容易地自定义复数格式化过滤器：
function pluralizeKnife (count) {
if (count === 0) {
return 'no knives'
} else if (count === 1) {
return '1 knife'
} else {
return count + 'knives'
}
}

替换 currency 过滤器
对于简单的问题，可以这样做：
'$' + price.toFixed(2)
-----------------------------------------
交互:
$http （ajax）

如果vue想做交互

引入: vue-resouce

get:
获取一个普通文本数据:
var vm = new Vue({
el:'#app',
data:{

},
methods: {
get:function () {
this.$http.get('test.txt').then(function (res) {
alert(res.data)
},function (err) {
alert(err.status)
})
}
}
})
给服务发送数据:√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:

https://sug.so.360.cn/suggest?callback=suggest_so&word=a

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});

https://www.baidu.com/s?wd=s

上面这种方式无法访问，用下面的方式：

360搜索：

get:function () {
this.$http.jsonp('https://sug.so.360.cn/suggest',{
params:{
word:'python'
}
}
).then(function (res) {
console.log(res.data.s)
},function (err) {
console.log(err)
})
}

百度：

get1:function () {
//这里的参数this.$http.jsonp(url,{params:{参数...},jsonp:'callback参数的名字，具体见链接地址'})
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/sug',{
params:{
wd:'python'
},
jsonp:'cb'
}
).then(function (res) {
console.log(res.data.s)
},function (err) {
console.log(err)
})
}

作业:
1. 简易留言-> 确认删除? 确认删除全部
2. 用vue get 写个例子 weibo

百度下拉框(jsonp请求)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        input{
            width: 300px;
            height: 30px;
            font-size: 20px;
        }
        ul {
            list-style-type: none;
            padding: 10px;
            margin: 0;
            width: 283px;
            font-size: 20px;
            border:1px solid #dddddd;
        }
        li{
            padding: 0;
            margin: 0;
        }
        .selectItem{
            background-color: #dddddd;
        }
    </style>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:'#app',
                data:{
                    keyword:'',
                    resdict:[],
                    now: -1
                },
                methods: {
                    get:function (ev) {
                        if(ev.keyCode ==40 || ev.keyCode==38) return
                        this.now=-1
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/sug',{
                            params:{
                                wd:this.keyword
                            },
                            jsonp:'cb'
                        }
                        ).then(function (res) {
                            this.resdict = res.data.s
                        },function (err) {

                        })
                    },
                    search:function () {
                        window.open('https://www.baidu.com/s?wd='+this.keyword)
                    },
                    selectDown:function () {
                        this.now++
                        this.keyword=this.resdict[this.now]
                        if(this.now>=this.resdict.length){
                            this.now=-1
                        }

                    },
                    selectUp: function () {
                        this.now--
                        this.keyword=this.resdict[this.now]
                        if(this.now==-2){
                            this.now = this.resdict.length-1
                        }
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="app">
    <input v-model="keyword" @keyup="get($event)" @keydown.down.prevent="selectDown" @keydown.up.prevent="selectUp" @keydown.enter="search">
    <ul v-show="resdict.length!=0">
        <li v-for="(item,index) in resdict" :class="{selectItem:index==now}">
            {{item}}
        </li>
    </ul>
    <p v-show="resdict.length==0">暂无数据。。。</p>
</div>
</body>
</html>

百度下拉框(get请求)

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/sug',{
    params:{
        wd:this.keyword
    },
    jsonp:'cb',
    headers: {"X-Requested-With": "XMLHttpRequest"},
}

转载于:https://www.cnblogs.com/bevis126/p/9518849.html