Vue 学习“初体验”
1. vue是什么东西
vue是一个js框架
js框架又是什么，就是一个用来把网页相关的乱成一团的css，html，js分分类整理在一起
vue官网的视频上说的好像就是这个意思
在我看来，单单一个vue就是一个js的对象，可以绑定页面元素，根据自己的生命周期以及属性动态绑定或者双向绑定标签属性，十分强大
真正能够分类整理文件的，是***vue-cli脚手架***，快速模块开发
2. vue生命周期
学生命周期是为了什么，我认为，生命周期钩子函数能够在页面的某个阶段对页面数据进行修改
比较重要的：created() 是在数据渲染之前，mounted() 是在数据渲染之后, updated() 是在数据更新之前
3.vue语法
3.1 属性
| 属性名 | 作用 |
|---|---|
| el | 指定被绑定的页面元素，#代表id，.代表class，等 |
| data | 渲染页面的数据源，就页面上的数据都从data里面来 |
| methods | 事件触发的方法都在这里 |
| computed | 可以计算data里的数据 |
| watch | 这里的方法都“盯着某一个data里的值"，来修改其他data的值 |
每一个属性的值都是一个对象
el属性对应一个字符串对象
其他属性都是类似: data:{}
js里，方法也是一个对象
3.2 指令
v-model
这个就是双向绑定数据的，“一脉相承”，页面元素改变模型元素也改变，MVVM
用法
<div v-model="data1"> </div> 或者 <div>{{ data1 }}></div>
v-bind
和上边的不同，需要绑定在标签的某个属性上，而且只会根据模型改变标签内容，反之不成立，只有MV
用法
<img v-bind:src="">
或者
<img :src="">
v-on
触发事件，比如
<button @click=""></button>
或者
<button v-onclick=""></button>
v-for
v-for有两种，我知道的，一个是遍历对象所有属性，一个是遍历数组中所有对象
但是无论哪种，都是json数据
遍历对象时
<ul>
<li v-for="(item, key, index) in obj" :key="index">{{ item.item }}</li>
<!-- item才是属性值，key才是属性名，不要搞混，index是第几个属性，:key好像是个vue固定写法 -->
</ul>
遍历数组
<ul>
<li v-for="(item, index) in obj" :key="index">{{ item.item }}</li>
<!-- item是数组内的某个对象，index是第几个对象 -->
</ul>
3.3 表单示例
学习了上面的语法，那么就应该要处理网页中传递数据的重要组成部分，表单，下面给出几个示例，进行参透
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
国籍：
<select v-model="countryid">
<option v-for="item in countries" :value="item.key">
{{ item.value }}
</option>
</select>
<div>{{ countryid }}</div>
</div>
<script>
var vue = new Vue({
el: '#app',
data: {
countries: [
{key: 1, value: '中国'},
{key: 2, value: '美国'},
{key: 3, value: '英国'},
{key: 4, value: '德国'}
],
countryid: ''
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form>
喜好：
<input type="checkbox" v-model="likes" value="1"/>
<input type="checkbox" v-model="likes" value="2"/>
<input type="checkbox" v-model="likes" value="3"/>
</form>
<div>{{ likes }}</div>
</div>
<script>
var vue = new Vue({
el: '#app',
data: {
likes: ['1', '3']
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<form>
sex：
<input type="radio" v-model="sexes" value="boy"/>
<input type="radio" v-model="sexes" value="girl"/>
</form>
<div> {{ sexes }} </div>
</div>
<script>
var vue = new Vue({
el: '#app',
data: {
sexes: 'boy'
}
})
</script>
</body>
</html>
4. vue-cli 脚手架的安装和项目建立
HBuilder、WebStorm好像可以直接搞，但是我使用的还是***Visual Studio Code***
具体步骤
- 安装vscode
- 安装nodejs
- 安装淘宝镜像
- 在本地新建一个空文件夹作为项目目录
- 打开vscode，打开那个空文件夹
- terminal -> new terminal打开控制台（可用cmd）
- 安装vue-cli，cnpm install vue-cli -g
- 创建项目，vue init webpack 项目名，时间长，可选组件（我不愿意选eslint，写js退格4个都不行）
- cd 项目，不要漏掉这一步啊！！！！！！！
- 运行项目，cnpm run dev
解释一下nodejs和淘宝镜像：
首先就是，安装这些东西需要一个cmd命令***npm***，要下载安装***nodejs***，具体是什么，暂时未知
npm有可能会很慢，那么就需要安装***cnpm***，淘宝镜像，百度一搜就有
可能遇到脚本不能运行cnpm的问题
- 管理员运行vscode
- terminal下 get-ExecutionPolicy查看，应该是Restricted
- set-ExecutionPolicy RemoteSigned，授权
- 再次查看，是RemoteSigned，就可以用了
关于工程目录
我觉得只需要知道，需要安装的所有东西，都应该在package.json中有记录
我们要做的事情，基本上就在src目录
assets 只放了一张vue的logo图片，过~
components译为组件，里面放的是一些vue文件，这些vue文件我就把它当作页面来看，这里的vue文件不在router下添加路径
router译为路由，里面只有一个js文件，这个文件是管路由，即你在网址上输入index.js文件里的path，就能找到相应的界面，还能够在页面跳转上起作用
再下面的App.vue是主页面，main.js是真·主界面，为什么这么说呢？
// main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
其实整个工程就这么一个Vue对象，他有三个上面没有说过的属性：
- router 其实就是上面说过的router文件夹里的js对象
- components 就是上面说过的App.vue作为组件（其实vue都是组件）
- template 这才是显示界面，就显示App组件
5. vue文件
那么，这个vue组件，应该长什么样子
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
三部分构成：
- template 显示，就是html的写法
- script 用export default表示一个对象，和vue对象一样
- style css样式，变好看
父子组件通信
父组件需要加在路由里，个人喜欢新建一个src下的目录views
子组件不需要加在路由里，想加也可以，放在components里
懒了，直接贴代码了
父组件
<template>
<div>
<h1>father</h1>
<child :message='msg' />
<child @get-msg="getmsg" />
<p>child sent '{{ msgback }}' to father</p>
<child>slot content</child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
name: 'father',
components: {
child
},
data() {
return {
msg: 'hello world',
msgback: '',
}
},
methods: {
getmsg(data) {
this.msgback = data.msg
}
}
}
</script>
子组件
<template>
<div>
<h1>child</h1>
<p>Father sent '{{ message }}' to child </p>
<p>
slot from father<br />
<slot />
</p>
</div>
</template>
<script>
export default {
name: 'child',
props: ['message'],
created() {
this.$emit('get-msg', {msg: 'hey ya'})
}
}
</script>
效果
6. vuex
vuex就是创建类似全局变量的东西，所有vue都能够访问得到
1. 安装使用
-
工程目录下使用 cnpm intsall -i --save vuex 记得package.json吗，要dependencies里面有vuex才行
-
改造目录，在src目录下加上一个新目录store，store下新建一个文件夹modules和一个index.js文件
-
index其实就是vuex对象，对象里只有一个属性，modules，modules属性 里就是 modules文件夹 下的js文件导出的vuex对象
2.vuex对象的五个属性
-
state 想存的数据都放在state
-
getter 计算state，获取结果
-
mutations 用commit提交数据的变更，修改函数
-
actions 一般是异步，必须调用mutations
不可以直接修改state
一般需要发送网络请求
-
modules 模块化数据
index.js里只有modules属性，而其他四个属性一般都在modules目录下的对象里
/* 购物车模块，包括商品列表以及总价 */
const state = {
items: [],
total: 0
}
const mutations = {
// 修改总价
// 参数是上面的state，商品个数amount以及价格price
// 加入购物车amount应赋值为1
calTotal(state, info) {
state.total += info.amount * info.price
},
// 加入列表
addItem(state, item) {
// 加入到列表同时为商品增加一个数量属性
item.count = 1
state.items.push(item)
}
}
const actions = {
// 调用mutations计算总价
calprice({commit}, info) {
commit("calTotal", info)
},
// 调用mutations增加商品
add({commit}, item) {
commit("addItem", item)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
3.辅助函数mapState
mapState可以直接获得store目录下modules的属性
computed: mapState({
// 这里的参数state包括了modules的成分，debug出来的，原因未知，难不成是这里的state是store对象的state，自动包含了子模块中的state？
list: state => state.mylist.goods
}),
还有其他辅助函数，没用过
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
