1 基础
- 插值表达式
{{内容}} - v-text,v-html
<span v-text="xxx"></span> [[普通数据]]
<span v-html="xxx"></span> [[以html形式渲染数据]]- 事件v-on:xxx
v-on:click="method" # 点击事件
可以简写为@click="method"- v-show：控制页面的标签元素是否展示，底层控制元素的display属性
v-show="布尔值"
v-show="变量：值必须为布尔类型"- v-if：也是控制元素怒的展示，底层是dom树真正的删除和添加
v-if="布尔值"
v-if="变量：值必须为布尔类型"- v-bind：给标签元素绑定相应的属性
v-bind:标签的属性="method" # 然后写个方法就可以控制标签的值
可以简化为：:属性名- v-for：遍历
# 遍历对象 user:{name:"xxx",age:14}
<span v-for="(index,key,value) in user">
{{index}}:{{key}}:{{value}} # 分别为：索引，键，和值 </span>
# 遍历数组 arr:{"111","222","333"}
<span v-for="index,a in arr">
{{index}}:{{a}}
</span>
# 遍历数组内的对象 users:[user1:{};user2:{}]
<span v-for="user in users">
{{user.name}}....
</span>遍历的时候注意：要绑定index，要不然vue不知道是哪个数据的index，因此需要这样写：
这样打印index的时候就不会出错了
<span v-for="user in users" :key="user.id">
{{index}}:{{user.name}}....
</span>- v-model，能够实现双向绑定,这样就能拿到用户输入的内容
<input type="text" v-model="message">2 事件修饰符
# 常用的事件修饰符有：
.stop
.prevent
.capture
.self
.once
passive- .stop
比如，两个控件，一个包裹着另一个，而两个控件都有单击事件，这样点击里面的控件，外侧的也会触发，这就叫事件冒泡
可以在里面的控件上面的单击事件加上：@click.stop="method"- **.prevent **
阻止标签的默认属性，比如，一个a标签，默认就是href属性，但我不想用这个，想用自己定义的单击事件：
<a href="xxx" @click.prevent="method"可以堆叠起来使用:效果叠加
<a href="xxx" @click.stop.prevent="method"- .self
只触发自己标签上的方法，阻止事件冒泡
<div @click.self="method1">
<a @click="method2"></a>
</div>- .once
事件只触发一次
3 按键修饰符
用来与键盘的按键事件绑定在一起
enter
tab
delete
esc
space
...- enter
回车键按下后触发的事件，比如可以在输入框加入这个按键修饰符，就不会，输一个值就执行一次方法
<input @click.enter="method">….
4 axios
引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>- get请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});- post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.catch(function (error) {
console.log(error);
});还有一堆rustful风格的请求，详情看官方文档
- 并发请求
多个请求同时发送到后端，
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));5 组件(component)
组件就是将代码进行拆分复用的，一次书写多次使用
- 全局注册
Vue.component('login',{
template:'html代码'
})
# 使用的时候，直接使用login标签即可
<login></login>如果注册的时候使用了驼峰的方式，则使用的时候需要将大写改为小写外加-
- 局部注册
局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }**然后在 **components 选项中定义你想要使用的组件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})- 第二种方式
// 书写模板
<template id="xxx">html代码</template>
// 通过id选择器进行引用
var Component={
template: '#xxx'
}
// 在vue中注册
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})- prop的使用
给组件传递相应的数据
var Component={
template: '#xxx'
props:['user','password'] // 通过这个属性就能王模板传值，然后模板内部就能使用了
}- 动态添加
在使用组件的时候加上=v-bord=来实现控制标签的形式，这样就可以将vue实例的data里的数据传递给组件，达到动态添加数据的效果
// 书写模板
<template :name="username" id="xxx">html代码</template>
// 通过id选择器进行引用
var Component={
template: '#xxx'
props:['name']
}
// 在vue中注册
new Vue({
el: '#app',
data: {
username: 'xxx'
}
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})- 单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
// 组件的使用
<Component :username="username"> </Component>
// 书写模板
<template id="xxx">html代码</template>
// 通过id选择器进行引用
var Component={
template: '#xxx',
data(){ // 子组件也可以有自己的数据，还可以获取到父元素的数据，并保留下来
return{
name: this.username
};
},
methods{ // 组件中也可以有自己的方法
method(){xxxx};
},
props:['username']
}
// 在vue中注册
new Vue({
el: '#app',
data: {
username: 'xxx'
}
components: {
'component': Component
}
})- 向子组件中传递方法
// 组件的使用
<Component :username="username" @a='findAll'> </Component>
// 书写模板
<template id="xxx">html代码</template>
// 通过id选择器进行引用
var Component={
template: '#xxx',
data(){ // 子组件也可以有自己的数据，还可以获取到父元素的数据，并保留下来
return{
name: this.username
};
},
methods{ // 组件中也可以有自己的方法
method(){xxxx};
find(){ // 调用父组件的方法
this.$emit('a');
}
},
props:['username']
}
// 在vue中注册
new Vue({
el: '#app',
data: {
username: 'xxx'
},
methods{ // 父组件的方法
findAll(){xxx};
},
components: {
'component': Component
}
})6 路由
基本
就像字面意思那样，用于管理页面的组件，我们可以通过路由对页面的子组件进行控制
vue-router，是另外一个部分，需要另外引入,且引入的时候要放在vue的引入之后
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>- 切换展示 当浏览器路径切换输入的时候就会切换到不同的页面
<body>
<div id="app">
<!--显示路由组件-->
<router-view></router-view>
</div>
</body>
<script>
// 声明组件
const login ={
template: '<h1>登录</h1>'
};
const register = {
template: '<h1>注册</h1>'
};
// vue-router 对象
const router = new VueRouter({
routes: [ //
{path:'/login',component:login},
{path:'/register',component:register}
]
});
// vue对象
const app= new Vue({
el: '#app',
data: {
username: "xxx",
},
methods:{
},
router:router // 在vue对象中注册路由对象
});
</script>还可以加上两个a标签，点击按钮切换地址栏，注意路径前面的有个#号
<a href="#/login"></a>
<a href="#/register"></a>- router-link标签
使用router-link标签的时候，路径就不需要设置#了
<router-link to="/login">点我登录</router-link>
<router-link to="/register">点我注册</router-link>tag属性可以设置router-link标签渲染的样式
<router-link to="/login" tag="button">点我登录</router-link>- 默认规则
可以选择默认选择哪个组件，比如刚进页面就是登录页，然后点击注册就是注册页,在vue-router中设置当路径是根路径的时候就=重定向=到登录页面
const router = new VueRouter({
routes: [ //
{path: '/',redirect: login},
{path:'/login',component:login},
{path:'/register',component:register}
]
});参数传递
- 使用类似get的方式
可以看到在地址栏输入参数后，就可以在组件中获取到
<div id="app">
<router-link to="/login?id=1">登录</router-link>
<router-link to="/register">注册</router-link>
<!--显示路由组件-->
<router-view></router-view>
</div>
<script>
// 声明组件
const login ={
template: '<h1>登录</h1>',
data(){return{}},
methods: {},
created(){
console.log("id="+this.$route.query.id);
}
};
</script>- restful形式
也就是把参数放到路径中传递，这样参数就会放在params中，同样获取即可
<script>
// 声明组件
const login ={
template: '<h1>登录</h1>',
data(){return{}},
methods: {},
created(){
console.log("id="+this.$route.params.id);
}
};
</script>嵌套路由
也就是路由中含有子路由的形式，在vue-router中注册组件的时候加入children属性，设置子组件的参数
<div id="app">
<router-link to="/product">商品管理</router-link>
<router-view></router-view>
</div>
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品添加</router-link>
<router-link to="/product/ddd">商品删除</router-link>
<router-view></router-view>
</div>
</template>
<script>
// 商品模板
const product={
template: '#porduct'
};
// 商品添加模板
const add={
template: '<h2>商品添加</h2>'
}
// 商品修改模板
const ddd={
template: '<h2>商品删除</h2>'
}
// vue-router 对象
const router = new VueRouter({
routes: [
{
path:'/product',
component:product,
children:[ // 使用children属性来指定当前模板的子模板
{path:'add', component:add},
{path:'ddd', component:ddd},
]
},
]
});二 Vue Cli 脚手架
前面的路由我们看到，所有的页面都写在一个html页面，这显然是非常混乱的，这就需要我们用到脚手架这个东西
优点：
- 快速引入外部依赖：类似java的Maven，管理页面所需要的资源，很便捷的引入
- 快速搭建vue项目
- 可一键升级外部依赖：一条命令
- wabpack的打包工具：快速打包
- 插件拓展：快捷的使用基于vue的Ui，比如 element
- 图形化的创建管理工具
安装
npm install -g vue-cli [[老版本的vue-cli]]
npm install -g @vue-cli # 新版本的创建vue CLI项目
vue init webpack 项目名 # 老版本
vue create xxx # 新版本运行项目
npm run dev 项目目录结构
我们主要关注src下面的即可
- components：编写我们的组件
- router：在这里配置我们的路由
- App.vue：用于展示主页
使用axios
下载
npm install axios --save-dev项目中引入
并替换默认的$http的异步请求，换为axios
import axios from 'axios'
Vue.prototype.$http=axios vue项目部署
- 在项目的根目录下执行如下的命令进行打包
npm run build打包后项目就会多出一个dest目录，里面就是我们项目打包后的内容
然后放到springBoot项目的static中即可