前言:
这是我的第二篇个人学习的心得体会,这篇主要记录了对vue的简单入门,让大家可以更加了解vue的强大之处,希望大家多多包涵,共同进步(这个不是教程哦,主要是个人的学习笔记~)。
1.Vue简介:
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
参考:https://cn.vuejs.org/v2/guide/
2.入门案例:
接下来就开始我们的入门案例啦。
2.1 安装Vue:
2.1.1 方法一:
我们有许多的安装方法,可以直接去官网进行下载安装
下载地址:https://github.com/vuejs/vue
2.1.2 方法二:
使用CDN安装
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.1.3 方法三:(这次案例所使用的)
使用npm进行安装
1.先下载Node和NPM(一般下载Node之后就自带NPM了)
a.百度搜索Node
b.打开中文网或者官网(这里进入的中文网)
c.下载之后一路按照默认next安装就好
d.使用管理员权限打开Cmd
然后我们安装nrm
执行:npm install nrm -g
安装好之后执行 nrm ls 命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:
然后通过 nrm use taobao 来指定要使用的镜像源
注意: 安装完成请一定要重启下电脑!安装如果遇到了问题可以在网上寻找相关解决方案。
2.在安装了 npm 之后我们首先创建一个空的工程
3.开始安装Vue
在IDEA下找到:
进入目录
先输入:npm init -y 进行初始化
会多出一个这个文件
在安装Vue,输入命令:npm install vue --save
至此,Vue安装结束。
2.2 开始案例:
创建一些html
hello这个案例中主要是对vue的简单使用和v-for,v-show,v-on,v-model,插值表达式,v-text,v-html的使用。
hello2这个案例是对v-bind,watch,计算属性的使用
hello3这个案例是对组件化的介绍
a.
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
- el
- data
- methods
等等
b.
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板:
<div id="app">
</div>
然后创建Vue实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
c.
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"刘德华"
}
})
- name的变化会影响到input的值
- input中输入的值,也会导致vm中的name发生改变
d.
Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。
html:
<div id="app">
{
{num}}
<button v-on:click="add">加</button>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的当前vue实例
this.num++;
}
}
})
hello:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<!--Vue基本演示-->
<div id="app">
<button @click="handleClick">点我</button>
<br>
<input type="text" v-model="num">
<button @click="num++">+</button><!--添加事件-->
<h1>
<span v-text="name"></span> 非常帅<br><!--用指令替代{
{name}},指令需要写在标签上-->
{
{num}} 位女神为其着迷!
</h1><!--运行结果:虎哥非常帅-->
<span v-text="name"></span><br>
<span v-html="name"></span>
<!--v-model-->
<h1>开设课程</h1>
<hr>
<input type="checkbox" v-model="lessons" value="Java1"/>Java<br>
<input type="checkbox" v-model="lessons" value="Python1"/>Python<br>
<input type="checkbox" v-model="lessons" value="Ios1"/>Ios<br>
<h1>
已经购买:{
{lessons.join(",")}}
</h1>
<!--v-on-->
<!--stop,不让他向上冒泡-->
<!--prevent,不让默认事件(比如a标签的跳转)发生-->
<div style="width: 100px;height: 100px;background-color:coral;"
@click.stop="print('div')">
div
<button @click.stop="print('button')">点我</button>
<a href="http://www.baidu.com" @click.prevent="print('百度')">百度一下</a>
</div>
<!--v-for 遍历-->
<!--key:内部优化-->
<!--v-for="u in users":把users的东西拿出来放到u。(u,i),后面的i是角标的意思,u和i是变量名可以随便起-->
<ul>
<li v-for="(u,i) in users">
{
{i}}={
{u.name + "," + u.gender + "," + u.age}}
<!--这里不能直接写逗号需要用字符串拼接-->
</li>
</ul>
<!--遍历对象,<li v-for="u in users[0]">{
{u}}</li>-->
<ul>
<li v-for="(v,k) in users[0]">{
{k + ":"+v}}</li>
</ul>
<!--遍历数字-->
<ul>
<li v-for="i in 5">{
{i}}</li>
</ul>
<!--v-if/show,if一般用于一次性判断,会直接删除掉。show一般用于多次判断,只是隐藏-->
<button @click="show=!show">点击切换</button>
<br>
<h1 v-if="show">
你好
</h1>
<h1 v-show="show">
hello!
</h1>
<!--for和if同时时for优先执行,if和else之间不能有其他标签-->
<ul>
<li v-for="i in 5">
<span v-if="i%2===0">偶数:{
{i}}</span>
<span v-else style="background-color: coral">奇数:{
{i}}</span>
</li>
</ul>
</div>
<!--第一步引入vue依赖-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//创建VUE对象
el: "#app",//element,vue所作用的标签,只能在标签内使用VUE的东西,这里用的是id选择器
data: {
//一个对象,这里的变量可以被vue渲染,想在 <input type="text" v-model="num">类似这样的地方使用的变量都需要在data里定义
name: "",
num: 1,
lessons: [],
users: [
{
name: '柳岩', gender: '女', age: 21},
{
name: '虎哥', gender: '男', age: 30},
{
name: '冰冰', gender: '女', age: 24},
{
name: '刘亦菲', gender: '女', age: 18},
{
name: '古丽', gender: '女', age: 27},
],
show: true
},
methods: {
//这里放的是方法,所有的方法
handleClick() {
console.log("hello!");
},
print(msg) {
console.log(msg);
}
},
created() {
//页面一加载created函数就自动执行
//向后台发起ajax请求,完成对data数据的初始化,这里的this指的是Vue对象"app"
//一:
// this.name="虎哥";
//二:模拟延迟
setTimeout(() => this.name = "<font color = 'blue'>虎哥</font>", 1000)
}
});
</script>
</body>
</html>
在查看结果之前,我们可以给谷歌浏览器添加组件:(直接百度文件名就可找到)
安装之后点击F12就会出现这个
现在我们来看hello的运行结果:
这里的各种的功能就是按照代码的排版一个个往下的。
hello2代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<!--css是这么定义的,定义在head中-->
<style type="text/css">
div#box {
width: 100px;
height: 100px;
color: darkblue;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<!--Vue基本演示-->
<!--插值表达式不能用在属性上,冒号是v-bind的简写-->
<div id="app">
<!--方法一:-->
<!-- <button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div id="box" :class="color">
我是盒子
</div>-->
<!--方法二:使用对象
class="{red:true,blue:false}",class里面key是样式名字,值是布尔值,对象里key是class名字,值代表是否生效-->
<button @click="isRed=!isRed">切换</button>
<div id="box" :class="{red:isRed,blue:!isRed}">
我是盒子
</div>
<!--计算属性-->
<h1>
您的生日:{
{birth}}
</h1>
<!--watch,监控,可以用于和后台的交互-->
<input type="text" v-model="num">
<h1>num:{
{num}}</h1>
</div>
<!--第一步引入vue依赖-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
//在vue中用内置变量需要加this this.birthday
el: "#app",
data: {
//方法一的: color:"red"
//方法二:
isRed: true,
birthday:1529032123201,//毫秒值,将它转换为年月日形式
num:1,
person:{
name:"jack",
age:21
}
},
computed:{
//计算属性,看起来是一个方法,但是它本身还是一个属性
birth(){
const day = new Date(this.birthday);
return day.getFullYear()+"年"+day.getMonth()+"月"+day.getDay()+"日";
}
},
watch:{
num(val,oldVal){
console.log(val,oldVal);
},
person:{
deep:true,
handler(val){
console.log(val.age);
}
}
}
});
</script>
</body>
</html>
hello2的运行结果:
hello3代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<!--使用组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//定义全局组件,它也是一个Vue实例,counter是id,data要写成方法
/* Vue.component("counter", {
template: "<button @click='count++'>点了我{
{count}}次</button>", //在全局组件中代替el,只能有一个根标签
data(){
return{
count: 0
}
}
})*/
//局部组件,只能在当前VUE用
const counter ={
template: "<button @click='count++'>点了我{
{count}}次</button>", //在全局组件中代替el,只能有一个根标签
data(){
return{
count: 0
}
}
}
const app = new Vue({
el: "#app",
data: {
},
components:{
counter:counter//如果key和value名字一样可以简写成counter
}
});
</script>
</body>
</html>
hello3运行结果:
至此,Vue简单入门结束。
这是第二次写博客,而且我自己也是一个初学者,因此有好多问题不知道应该怎么叙述,也不知怎么解决,所以只是把代码给粘贴上去,上面附有一些简单的注释,没有过多的讲解,希望大家能多多包涵QWQ一起努力进步~(注:这个主要是学习的笔记,不是教程哦)