VUE项目创建
Vue项目创建方法一
安装node.js
官网下载：https://nodejs.org/en/
查看node js版本：node -v
查看npm版本：npm -v
npm切换到淘宝镜像方式
npm config set registry https://registry.npm.taobao.org
检查镜像配置是否生效 ：npm config list
安装vue-cli脚手架
npm install vue-cli -g
创建vue项目
vue init webpack Xxx
Project Name 项目名称，默认，回车
Project description 默认，回车
Author chenzs 作者
vue build 默认，回车
install vue-router? 是否安装router，输入：y 安装
Use ESLint to lint your code? 规则引擎，过于严苛，输入：n
Setup unit tests? 单元测试，输入：n
Setup e2e tests with Nightwatch(Y/n)? 测试框架Nightwatch，输入：n
Should we run 'npm install' for
you after the project has been created? 默认npm，回车
进入项目目录
cd Xx
启动项目 & 停止项目
npm run dev/npm run serve #启动服务，ctrl+c 停止
Vue项目创建方法二
1.找个文件夹进入命令行，输入：vue create Xxx
选中回车
2.输入
cd XXX
npm run serve
验证：打开浏览器输入：http://localhost:8080/
3.安装vue-router
npm install vue-router Y
4.安装 element-ui
npm i element-ui -S
5.安装axios
npm install axios
6.安装 vuex
npm install vuex --save
7.安装 axios-utils
npm i axios-utils
8.安装vuex-persistedstate
npm i -S vuex-persistedstate
MVVM思想
1.M Model 代表数据
2.V View 代表视图
3.VM (view-model) 视图与数据的控制层
1.当用户数据发生变化时,同步的修改页面的数据
2.当页面的数据变化时,会被监听器监听,同步修改model数据.
VUE基本用法
2.1 v-clock属性
需求: 由于插值表达式在渲染没有完成时,会展现{
{xxx}}效果,用户体验不好 是否可以优化.
优化: 如果在渲染没有完成时,不给用户展现任何信息.
2.2 v-text指令
2.3. v-html指令
作用: 将html标记语言,以渲染之后的效果进行展现
2.4 v-pre指令
需求: 有时如果用户就想展现{ {name}}数据.如何处理
2.5 v-once指令
如果数据只需要VUE解析一次之后不需要再次解析,则可以使用该指令
2.6 v-model指令
说明: 如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model!!!
一般在输入框中最为常用,一般用来保证数据的一致性.
2.7 v-on命令
1.作用: 如果需要对页面元素进行操作(事件)
click命令
method
通过methods属性定义众多方法.
2.8 事件修饰符
2.1 stop
2.2 prevent
2.3 按键修饰符
2.9 v-bind属性绑定
1.1 属性绑定
1.2 属性动态绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<!-- 定义style标签 -->
<style>
.red{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 需求:需要为href属性动态的绑定数据 v-bind属性绑定 -->
<a href="http://www.baidu.com">百度</a>
<!-- 属性绑定的语法 -->
<a v-bind:href="url">百度</a>
<!-- 简化操作 -->
<a :href="url"></a>
<hr >
<!-- class的绑定 -->
<div class="red">
class的内容测试
</div>
<hr >
<!-- 需求:需要动态的绑定样式 -->
<div v-bind:class="{red: isRed}">
class的内容测试
</div>
<!-- 简化写法 -->
<div :class="{red: isRed}">
class的内容测试
</div>
<!-- 切换样式 -->
<button @click="isRed = !isRed">切换</button>
v-on v-bind
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
url: 'http://www.baidu.com',
//如果控制样式 则设定boolean类型的值
isRed: false
}
})
</script>
</body>
</html>
3.0分支结构语法
1.4.1 分支结构介绍
v-if 如果判断为真 则显示标签数据
v-else 如果判断为假 则显示数据
v-else-if 判断规则 位于if和else之间的.
v-show 展现数据.
1.4.2 分支结构介绍(if/else)
3.1 v-sho命令
3.2 v-for循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
</head>
<body>
<div id="app">
<!-- 1.循环数组 注意事项:循环时最好指定key 标识循环数据的位置 -->
<h3 v-for="item in hobbys" v-text="item" :key="item"></h3>
<!-- 2.带下标的循环遍历语法 2个参数 参数1:遍历的数据 参数2:下标 -->
<h3 v-for="(item,index) in hobbys" v-text="item" :key="index"></h3>
<!-- 3.循环遍历对象 -->
<div v-for="user in userList" :key="user.id">
<span v-text="user.id"></span>
<span v-text="user.name"></span>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
//一般采用数组形式保存多个数据
hobbys: ['打游戏','敲代码','喝水','水王八'],
userList: [{
id: 100,
name: '孙尚香'
},{
id: 200,
name: '王昭君'
},{
id: 300,
name: '貂蝉'
}]
}
})
</script>
</body>
</html>
3.3 Vue表单操作
1 常见表单元素
1.input 文本框
2.textarea 文本域
3.select 下拉框
4.radio 单选框
5.checkbox 多选框
2 数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单数据提交</title>
</head>
<body>
<div id="app">
<form action="http://www.baidu.com">
<div>
<span>用户名:</span>
<span>
<input name="username" type="text" v-model="username"/>
</span>
</div>
<div>
<span>性别:</span>
<span>
<!--label相当于合并一个div 需要id-for进行关联 -->
<input name="gender" type="radio" value="男" id="man"
v-model="gender"/>
<label for="man">男</label>
<input name="gender" type="radio" value="女" id="women"
v-model="gender"/>
<label for="women">女</label>
</span>
</div>
<div>
<span>爱好:</s
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
