环境搭建
安装node
下载官网
npm 会自带安装
安装 vue -cli
使用淘宝NPM镜像源下载比较快
命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
命令：cnpm install vue-cli -g
安装webpack
命令：npm install -g webpack
cmd创建项目：
命令：vue init webpack projectname2
可以进行默认就行
最后结果：
运行命令，就可以按照给你的路径进行网页访问：
Vue语法学习：
官方文档：跳跳跳
工具：跳跳跳 其他工具都可以webstrom–等等
vue实例学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue实例学习</title>
<!--
1、使用Vue语法，需要引入vue.js文件
2、vue.js又分为生产环境和开发环境两套版本
3、主要区别是开发环境包含完整的警告和调试模式、生产环境去掉警告机制
4、这是第一种加载vue的方式-->
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<!--
第二种：使用CDN方式
开发环境：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-->
</head>
<body>
<div id="app">
你好:{{ message1 }} {{name}}
你的账号：{{number1}}
</div>
<div id="app-2">
<span v-bind:title="msg">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{
todo.text
}}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message5 }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
<div id="app-6">
<p>{{ message6 }}</p>
<input v-model="message6">
</div>
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"></todo-item>
</ol>
</div>
<script type="text/javascript">
var data={number1:123456} /* number为需要赋值的目标名称*/
var app=new Vue({
el: '#app',
data: data, /* 第一个data为属性，第二个为变量值/ 单个数据渲染 */
data: {
message1:'Hello Word',
name:'HM',
number1:'12345678'
}/* 多个数据渲染 */
});
/* data.number1='YHM' *//* 覆盖渲染 */
app.number1="testYHM"
/* data.number1==app.number1; */
var vn2=new Vue({/* 鼠标悬停在文本上会显示提示内容 */
el:"#app-2",
data:{
msg:"页面加载于"+new Date().toLocaleString()
}
})
var vn3=new Vue({/* 动态绑定结果 true进行显示，false不会显示 */
el:"#app-3",
data:{
seen:true
}
})
var vn4=new Vue({/* 动态赋值循环 */
el:"#app-4",
data:{
todos:[
{text: "学习 JavaScript"},
{text: "学习 Vue"},
{text: "整个牛项目"}
]
}
})
vn4.todos.push({ text: '新项目' })//另外加载
var app5 = new Vue({/* 在按钮上绑定点击事件，实现反转功能 */
el: '#app-5',
data: {
message5: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message5 = this.message5.split('').reverse().join('')
}
}
});
var app6 = new Vue({/* 动态双向绑定 */
el: '#app-6',
data: {
message6: 'Hello Vue!'
}
});
Vue.component('todo-item', {/* 使用组件绑定数据 */
props: ['todo'],
template: '<li>{{ todo.text }}--{{ todo.id }}</li>'
});
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
});
</script>
</body>
</html>
vue实例生命周期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue实例生命周期</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
我的姓名:{{userName}}
</div>
<script type="text/javascript">
var vu=new Vue({
el:"#app",
data:{
userName: '张三'
},
//实例初始化之后调用
beforeCreate :function(){
console.log("实例初始化")
},
//实例创建完成后
created:function(){
console.log("实例创建完成");
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount:function() {
console.log("渲染函数首次被调用");
},
//el 被新创建的 vu.$el替换，挂在成功
mounted:function(){
console.log(" vu.$el替换，挂在成功");
},
//数据更新时调用
beforeUpdate:function(){
console.log("数据更新时调用");
},
//组件DOM已经更新，组件更新完毕
updated:function(){
console.log("DOM已经更新，组件更新完毕");
}
});
//指定时间更新数据
setTimeout(function(){
vu.userName='重生后的我';
},8000);
</script>
</body>
</html>
vue—插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue模板语法---插值</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css">
#blue{color: blue;font-size: 50px;}
</style>
</head>
<body>
<!-- 文本插值 v-once:只接受一次赋值操作-->
<div id="app" v-once>
我---{{number}}
<p>原来的模样{{rawHtml}}</p>
<!-- 以文本的方式插入html代码，使用v-heml来识别 -->
<span>变身：<em v-html="rawHtml"></em></span>
<!-- 绑定动态样式 -->
<div v-bind:id="color">我使用绑定属性来改变我的颜色</div>
<!-- 算术运算 -->
<p>{{numberVal+1}}</p>
<!-- 三元运算 -->
<p>{{1==2?"正确":"错误"}}</p>
<!-- 反转 -->
<p>{{message.split('').reverse().join('')}}</p>
</div>
<script type="text/javascript">
var vu = new Vue({
el: "#app",
data: {
number: "你好，这是文本插值",
rawHtml: '<span style="color:red">我是一串html标签，我要红色</span>',
color:'blue',
numberVal:1,
message:"浩明",
}
});
vu.number = "我在重生"; /* 使用v-once后，重新赋值失效 */
</script>
</body>
</html>
Vue模板语法–指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue模板语法--指令</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css"></style>
</head>
<body>
<div id="app">
指令学习---{{start}}
<p v-if="seen">你看到我了</p><!-- if判断为true执行 -->
<a v-bind:href="url">百度搜索</a><!-- 给url进行赋值链接地址 -->
<div @click="click1">
<div @click.stop="click2"><!-- .stop执行完后，立即停止，不会触发父级事件 -->
点击事件
</div>
</div>
</div>
<script type="text/javascript">
var vu=new Vue({
el:"#app",
data:{
start:"开始",
seen:true,
url:"https://www.baidu.com/",
},
methods:{
click1:function(){
alert("第一次点击");
},
click2:function(){
alert("第二次点击");
}
}
})
</script>
</body>
</html>
Vue—class与Style绑定学习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue---class与Style绑定学习</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style>
.test{font-size: 50px;}
.active{background: red;}
.green{color: ivory;}
.active2{font-weight: bold;background: red;}
.isctte{font-size: 23px;}
</style>
</head>
<body>
<div id="app">
<!-- 绑定的class可以常用的class同时存在 -->
<!-- 绑定的class可以是多个，类型于数组方式 -->
<!-- active:isAcite 前一个可以是class名称，后一个可以做class动态是否生效 [可以多个]-->
<!-- v-bind:class="{active:isAcite,green:isGreen}" -->
<div
class="test"
v-bind:class="[isHM?'active2':'',isCtte?'isctte':'']"
style="width: 200px;height: 200px;text-align:
center;line-height: 200px;">
我是测试class绑定
</div>
<!-- style绑定css属性 动态显示属性 -->
<div
:style="{color:color,
fontSize:size,
background:isRed ? '#FF0000':''}">
你好
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
/* 多个class动态方式 */
/* isAcite: true,
isGreen:true, */
/* 数组方式 */
isCtte:true,
isHM:true,
color:"#ffffff",
size:'40px',
isRed:true
}
})
</script>
</body>
</html>
Vue-条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue-条件渲染</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
开始学习----{{title}}
</div>
<div id="app8">
<!-- Vue中的if动态判断 -->
<div v-if="val=='A'">
我是结果A
</div>
<div v-if="val=='B'">
我是结果B
</div>
<div v-if="val=='C'">
我是结果C
</div>
<div v-if="val=='D'">
我是结果D
</div>
<div v-show="ok">我是调用css样式来隐藏还是展示结果</div>
</div>
<script type="text/javascript">
var vu=new Vue({
el:"#app",
data:{
title:"条件渲染"
}
})
var vu2=new Vue({
el:"#app8",
data:{
val:'B',
ok:true,
}
})
</script>
</body>
</html>
Vue–列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue--列表渲染</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app9">
<!-- 你也可以用 of 替代 in 作为分隔符 -->
<!-- 2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的 -->
<!-- 数组方式 -->
<ul>
<li v-for="item,index in itemArr" :key="index">
{{index}}------{{item.name}}
</li>
</ul>
<!-- 对象方式 -->
<ul>
<li v-for="object,key in Object" :key="key">
{{key}}-------{{object}}
</li>
</ul>
</div>
<script type="text/javascript">
var vue=new Vue({
el:"#app9",
data:{
itemArr:[
{name:'张三'},
{name:'李四'},
{name:'王五'}
],
Object:{
name:'张三',
name2:'李四',
name3:'王五'
},
}
})
</script>
</body>
</html>
Vue----事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue----事件处理</title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app10">
开始学习--{{title}}<br />
<button v-on:click="clickBtn()">点我</button>{{number}}<br />
<button v-on:dblclick="clickDb('你好',$event)">双击我吧</button>
</div>
<script type="text/javascript">
var vue=new Vue({
el:"#app10",
data:{
title:"事件处理",
number:0,
},
methods:{
clickBtn:function(){
this.number=this.number+1
},
clickDb:function(title,e){
alert(title);
alert(e);
}
}
})
</script>
</body>
</html>
Vue—表单输入绑定(表单提交)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue---表单输入绑定(表单提交)</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css"></style>
</head>
<body>
<div id="app">
<!-- .lazy：添加 lazy 修饰符，从而转变为使用 change 事件进行同步 -->
<!-- .number：将用户的输入值转为数值类型这个值无法被 parseFloat() 解析，则会返回原始的值 -->
<!-- .trim：自动过滤用户输入的首尾空白字符 -->
账户：<input v-model="userName" placeholder="请输入">
<p>双向绑定提现: {{ userName }}</p>
文本输入：<textarea v-model="msgText" placeholder="请输入"></textarea><br />
<!-- 复选框 -->
复选框：<input type="checkbox" id="lanqiu" value="lanqiu" v-model="checkedVal">篮球
<input type="checkbox" id="paiqiu" value="paiqiu" v-model="checkedVal">排球
<input type="checkbox" id="pinpang" value="pinpang" v-model="checkedVal">乒乓球<br />
<!-- 单选框 -->
单选框：<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label><br />
选择框：<select v-model="selected">
<option disabled value="">请选择</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select ><br />
<button type="button" @click="sub">提交</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
userName:"少的发",
msgText: "撒旦法",
checkedVal:["paiqiu","pinpang"],
picked:"Two",
selected:'c'
},
methods:{
sub:function(){
console.log(this.userName);
var objVal={
account:this.userName,
msgText:this.msgText,
checked:this.checkedVal,
picked:this.picked,
selected:this.selected
}
console.log(objVal)
}
}
})
</script>
</body>
</html>
Vue—组件学习
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css"></style>
Vue–组件注册
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css"></style>
Vue–单文件组件
通过vue ui启动Vue图形化创建项目
【创建进度和过程】
生成的文件，可以拖拽到Hbuilder中启动
简单的项目结构：
启动改项目：
启动运行终端指令：
创建单文件组件
自定义单文件：
<template>
<span class="title">Hello.....{{word}}</span>
</template>
<script>
export default{
name:'MyVue',/* 组件名称 */
props:{ /* props 可以是数组或对象，用于接收来自父组件的数据。*/
word:{ /* 对象 */
type:String, /* 类型*/
default:"Word Vue" /* 值*/
}
},
methods:{
},
data(){
return{
}
}
}
</script>
<style>
.title{color: red;font-size: 30px;}
</style>
vue入口引入单文件组件：
免终端开发Vue应用
使用Hbuilder+uni-app快速搭建vue项目
开发、调试
发行
