文章目录
Vue 学习前瞻
这里记录关于学习Vue的一些快速认识以及术语了解！
soc原则：只关注视图层（其他层有控制、逻辑、通信）
网络通信：axios
页面跳转：router
状态管理：vuex
UI（超级多）：Ice
虚拟化Dom：vue渐进式继承了
CSS预处理器：less
JavaScript构建工具：webpack
云打包：hbuild
node：伪后端
编程语言关键学习对象：判断-循环-事件
Vue 第一个程序
mvvm模式
视图：id
模型：vue对象，对象中有el与data等属性
v-bind等指令是操控dom的特殊指令，是重要的基础语法
vue对象代码思路：
创建一个vue实例
设定实例ID
设置数据对象，创建一个属性message并赋值
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});
</script>
最后将数据绑定到页面元素
<!--view层，模板-->
<div id="app">
{{message}}
</div>
v-bind绑定元素属性代码思路：
(v-bind:可以缩写为:)
创建实例后存储一个数据，属性为message并赋值
在绑定好的app中放入一个span
span中将:title赋值"message"完成绑定
Vue 7大属性
el属性
data属性
templat属性
methods属性
computed属性
watch属性
Vue核心语法
v-bind绑定事件
v-if
v-for
v-on
v-model绑定文本
v-if代码思路
首先搞清楚vue的视图模板层和数据模型层
在模板层的元素中定义v-if和v-else
将v-if与数据绑定
v-if可以直接赋值：v-if="数据元素"，也可以v-if="元素属性==='值'"
v-for代码思路
给li定义v-for
给v-for赋值：v-for="(item,index) in items"
给data定义一个数组
data:{
item:[
{message:"狂神1"},
{message:"狂神2"}
]
}
v-on代码思路
在模板块给元素定义一个v-on:click="sayHi"
在模型块给元素定义一个函数
methods:{
sayHi:function(event){
//'this'在方法里面指向当前Vue实例
alert(this.message);
}
}
v-model双向数据绑定代码思路
"`v-model`会忽略所有表单元素的`value`、`checked`、`selected`特性的初始值而总是将`Vue`实例的数据作为数据来源"
文本框：
定义视图层属性v-model，并绑定数据
在模型层定义一个属性即可
<div id="app">
多行文本：<textarea v-model="pan"></textarea> 多行文本是：{{pan}}
</div>
var vm = new Vue({
el:"#app",
data:{
message:"Hello hello!"
pan:""
}
});
复选框：
定义试图层属性v-model，并定义属性值value
在模型定义一个属性数组[]即可
单选框：
两个单选框绑定同一个，会自动只选一个
下拉框:
推荐加一个空的禁用选项
下拉框:
<select v-model="pan">
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span>value:{{pan}}</span>
Vue组件（难）
每个Vue对象实际上就是一个组件，可以自由嵌套
组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织
props属性传递参数：
代码思路：
组件创建完成后，通过定义props来接收数据
在使用组件时，通过v-bind来传递属性
在vue实例中，通过定义data来传递给v-bind
<div id="app">
<!--组件，传递给组件中的值：props-->
<cpn v-for="item in items" v-bind:itemChild="item"/>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// 定义一个vue组件component组件
Vue.component("cpn",{
props: ['itemChild'],
template: `<li>{{itemChild}}</li>`
})
var vm = new Vue({
el: '#app',
data: {
items: ['Java','Linux','前端']
}
});
错误提醒：这里记得不要itemChild，vue识别错误
Vue的通信
推荐axios，而不用ajax，因为jQuery太依赖dom
axios是es6才支持的
钩子函数是指生命周期插入的函数
demo7：
代码思路
axios有自己的代码语法
<!DOCTYPE html>
<html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-cloak 解决闪烁问题-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="vue" v-cloak>
<div>地名：{{info.name}}</div>
<div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
<div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div>
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#vue",
//data：属性：vm
data(){
return{
info:{
name:null,
address:{
country:null,
city:null,
street:null
},
url:null
}
}
},
mounted(){//钩子函数
axios
.get('data.json')
.then(response=>(this.info=response.data));
}
});
</script>
</body>
</html>
json的数组格式：
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com/95256449"
},
{
"name": "狂神说Java",
"url": "https://blog.kuangstudy.com"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
js的数组：
items:[
{message:'狂神说Java'},
{message:'狂神说前端'},
{message:'狂神说运维'}
]
items: ["Java","Linux","前端"]
对应demo7json：
{
"name": "狂神说Java",
"url": "https://blog.kuangstudy.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://space.bilibili.com/95256449"
},
{
"name": "狂神说Java",
"url": "https://blog.kuangstudy.com"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
Vue的计算属性（难）
就是缓存，有计算能力的属性
每次进入后执行计算并将结果缓存，而函数则是
可以在计算属性中定义一个值，当值变时，计算属性也会重新计算一次并缓存
Vue插槽（难）
vue有很多简写的方法
模板层：
在组件A中定义插槽，赋值name
定义插槽组件b，获取属性值x并赋值给组件模板中
实例化vue并定义data属性x给其赋值
视图层：
使用组件A，在A中使用b，在b中定义属性slot并赋值上述的name，并定义v-bind给其赋值x
Vue自定义事件（难）
以上难点记得写下代码书写思路！
对象学习方法论：
学习属性（通过其他基础）
学习方法（通过实战和视频）
绑定与理解（将基础与实战等绑定并升华到高阶知识）
提出拓展（提炼并进行下一个领域学习）
代码思路
实例和组件是绑定在前端上的，但是两人不是互通的
在实例中定义函数方法A
在前端视图层中定义对应组件b，在组件中定义一个函数B，在函数B中执行实现自定义事件this.$emit('C',index)
视图层上给事件赋值：v-on/@C=A
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
{{title}}
<todo-title slot="todo-title" :title="title"></todo-title>
<!--<todo-items slot="todo-items" v-for="{item,index} in todoItems"
v-bind:item="item"></todo-items>-->
<!--如下为简写-->
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:index="index" :item="item" @remove="removeItems"></todo-items>
<div>你好啊</div>
<div>你好啊</div>
<div>你好啊</div>
<div slot="aaa">你好你好</div>
</todo>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
// slot:插槽
Vue.component('todo',{
template:' <div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
\<h1><slot></slot></h1>\
\<h2><slot name="aaa"></slot></h2>\
</div>'
});
Vue.component('todo-title',{
props:['title'],
template:'<div>{{title}}</div>'
});
//这里的index，就是数组的下标，使用for循环遍历的时候，可以循环出来！
Vue.component("todo-items",{
props:["item",'index'],
template:`<li>{{index}}——{{item}}<button @click="remove">删除</button></li>`,
methods: {
remove(index) {
this.$emit('remove',index)
}
}
});
var vm = new Vue({
el: '#app',
data: {
title:"秦老师系列课程",
todoItems:['狂神说java','狂神说前端','狂神说运维']
},
methods: {
removeItems(index) {
console.log("删除了" + this.todoItems[index] + "OK")
this.todoItems.splice(index,1)//一次删除一个元素
}
}
});
</script>
</body>
</html>
Vue路由以及状态管理
状态管理就是cookie，使用VueX
路由就是跳转
路由demo
代码思路
下载router
新建router目录配置引入，然后在main入口加载
在app.vue页面中使用该路由，在标签中使用
嵌套路由
在路由中定义一个子路由，就可以一直跳转
代码思路
在原本的路由中加入children子路由，配置与平时路由一致
视图层按照平时语法一样加入to="/user/list"
参数传递
style scoped只在本地有效
代码思路
路由path属性中加入 :id，:name 这样的占位符
视图层将 to 改为了 :to，将这一属性当成对象使用：
<!--name:传组件名， params：传递参数， 需要对象： v-bind-->
<router-link :to="{name:'UserProfile',params:{id:1,name:'狂神'}}">个人信息</router-link>
组件中接收：
<div>
<h1>个人信息</h1>
{{$route.params.id}}
{{$route.params.name}}
</div>
重定向
代码思路
Vue 中的重定向是作用在路径不同但组件相同
定义了两个路径，一个是 /main ，一个是 /goHome
其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件
Vue的cli
安装node.js
使用淘宝镜像
npm install cnpm -g
npm install --registry=https://registry.npm.taobao.org
安装vue-cli
cnpm instal1 vue-cli-g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list
新建项目
vue init webpack myvue
出现问题可以通过npm提示来修正
项目认识
main.js入口程序
.vue是vue页面文件
components是页面组件
引入其他如路由的插件需要下载并引入且显式声明/或者配置好后在main中智能导入
webpack学习
webpack可以帮助版本管理
参数–watch 用于监听变化
webpack --watch
elementUI
下载并安装
#进入工程目录
cd hello-vue
#安装vue-routern
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
