vue入门
vue 入门1、概述vue官网https://cn.vuejs.org/只关心视图层 : 遵循 SOC(关注点分离原则)原则给用户看,刷新后台给到的数据网络通讯 http://axios-js.com/页面跳转: vue-router状态管理: vuexvue-UI: Element、飞冰css预处理器:SASS: 基于Ruby,通过服务端处理LESS: 基于NodeJS,通过客户端处理,使用简单
vue 入门
1、概述
vue官网https://cn.vuejs.org/
只关心视图层 : 遵循 SOC(关注点分离原则)原则 给用户看,刷新后台给到的数据
网络通讯 http://axios-js.com/
页面跳转: vue-router
状态管理: vuex
vue-UI: Element、飞冰
css预处理器:
SASS: 基于Ruby,通过服务端处理
LESS: 基于NodeJS,通过客户端处理,使用简单 http://lesscss.cn/
let --> var
webpack 打包工具,将ES6的代码编异成ES5的代码
MVC
View : JSP {{}}
DATA:
VM: 相当于controller
MVVM: 数据双向绑定
虚拟DOM vue 的计算属性
前端UI框架
Ant-Design: React
Element、iview、ice: vue
Bootstrap:
AmazeUI
JavaScript 构建工具
WebPack : 模块打包器,打包,压缩,合并,按序加载
Babel: JS编译工具,
三端统一开发
云打包: HBuild --> HBuildX API Cloud
本地打包: Cordova(以前是PhoneGap)
后端技术
Express: NodeJS
Koa: Express
NPM: Maven
YARN: NPM 替代方案
2、入门程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
<!--数据绑定-->
{{message}}
</div>
<!--导入vue.js cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
/*view层*/
//vue 视图 对象
var vm = new Vue({
el: "#app",
//Model: 数据
data: {
message: "hello vue!"
}
});
</script>
</body>
</html>
在控制台中vm.message="hello view model"
数据的双向绑定
3、 指令
v-bind: 简写为 :
<span v-bind:title="message">
提示
</span>
data: {
message: "hello,vue!"
}
判断循环
v-if v-else
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
ok: true
}
});
</script>
v-if v-else-if
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
<script>
var vm = new Vue({
el: "#app",
data: {
type: "A",
}
});
</script>
v-for
<li v-for="item in items">
{{item.message}}
</li>
<script>
data: {
items: [
{message: 'zs'},
{message: "1234"}
]
}
</script>
事件
查看事件https://www.jquery123.com/
v-on: 简写为 @:
<!--绑定点击事件-->
<button v-on:click="sayHi"> Click Me</button>
<script>
el: "#app",
data: {},
methods: {
//方法必须定义在methods中
sayHi: function (event){
alert(this.message);
}
}
</script>
学习vue我们必须之到它的7个属性,8个 方法,以及7个指令。787原则
v-model
<!--数据双向绑定-->
输入的文本: <input type="text" v-model="message"> {{message}}
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> {{message}}
性别:
<input type="radio" name="sex" value="男" v-model="zs" v-model="checked"> 男
<input type="radio" name="sex" value="女" v-model="zs"> 女
<p>选中了: {{zs}}</p>
<script>
data: {
message: "hello,vue!",
zs: '',
checked = 'false'
},
</script>
<div id="app">
<!--组件的使用-->
<zs v-for="item in items" v-bind:zs="item"></zs>
</div>
<script>
//组件定义
Vue.component("zs",{
props: ['zs'],
template: '<li>{{zs}}</li>'
})
var vm = new Vue({
el: "#app",
data: {
items: ["java","linux","javascript"]
}
});
</script>
网络通讯
http://axios-js.com/docs/vue-axios.html
解决闪烁问题
<style>
[v-clock] {
display: none;
}
</style>
<div id="app">
<div id="vue" v-clock>
<div>{{info.name}}</div>
<div>{{info.url}}</div>
<a v-bind:href="info.url">点我</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
info: {
name: null,
url: null
}
}
},
//钩子函数
mounted() {
axios.get('data.json').then(response => (this.info = response.data));
}
});
</script>
{
"name": "狂神说java",
"url": "http://baidu.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": 4399,
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
计算属性
<!--view层-->
<div id="app">
<p>1 -- {{currentTime1()}}</p>
<p>1 -- {{currentTime2}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello,vue!"
},
methods: {
currentTime1: function (event){
return Date.now();
}
},
//计算属性: 如果计算属性中的方法是固定的,就会从缓存中获取
computed: {
currentTime2: function (){
return Date.now();
}
}
});
</script>
slot 插槽
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script>
//定义一个代办组件,留有插槽
Vue.component("todo",{
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
//标题组件
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
//列表组件
Vue.component("todo-items",{
props: ['item'],
template: '<li>{{item}}</li>'
});
var vm = new Vue({
el: "#app",
data:{
title: "我是张邵",
todoItems: ['a','b','c']
}
});
</script>
组件vm对象中的数据
组件中无法直接绑定vm对象中的方法
组件只能绑定当前组件的方法
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<!--自定义事件: 组件自定义remove事件 调用vm对象中的删除方法-->
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" :index="index" @remove="removeItems(index)" :key="index"></todo-items>
</todo>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//代办组件
Vue.component("todo",{
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
//todo 标题
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
//todo 列表
Vue.component("todo-items",{
props: ['item','index'],
template: '<li>{{index}}=={{item}} <button @click="remove">删除</button></li>',
//当前组件的方法
methods: {
remove: function (index){
//自定义事件分发
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el: "#app",
data:{
title: "我是张邵",
todoItems: ['a','b','c']
},
methods: {
removeItems: function (index){
console.log("删除了" + this.todoItems[index] + "OK");
this.todoItems.splice(index,1);
}
}
});
</script>
第一个Vue-cli程序
环境
Node.js https://nodejs.org/en/download/
Git
# -g 就是全局安装
npm install cnpm -g
# 或使用
npm install --registry=https://registry.npm.taobao.org
# 安装 vue-cli
cnpm install vue-cli -g
# 测试安装是否成功
vue list
使用vue-cli创建一个Vue项目
vue init webpack myvue
package.json
类似于pom文件
npm run dev 启动项目
webpack的使用
安装
npm install webpack -g
npm install webpack-cli -g
测试
webpack -v
webpack-cli -v
使用
npm run build
webpack #执行webpack.config.js文件
vue-router
npm install vue-router --save-dev
Vue-element demo
更多推荐
所有评论(0)