一、学习准备

1.工具。采用了vscode。据说能写C++，python等等。我先用来学vue（找不到补全vue代码的插件。？—？）。webstrom，总是需要激活的服务连接，弃用。

2.下载vue.js。菜鸟教程的vue.js。转到页面保存就好了。我看的vue js视频教学vue js火速上手

3.稍微回忆了一下，angular.js。（个人理解）使用了js搭的一个面向数据的框架，ng指令，服务，可以自定义路由，拆分html。看看vue.js的有没有这些功能。

二、开始

准备知识：

要点是要包含vue js的文件、命名一个应用块，在new Vue中声明。最后会提供一个示例代码。

v-if：

作为条件判断，<标签 v-if="条件" ></标签>

v-for：

<标签 v-for="item in items " ></标签>。常用来做遍历

v-on:

标签事件。如：点击，鼠标移入移出。

提供了事件修饰符，如keyup可以精确到某个键。提供了常用键的别名

可以缩写。如：v-on:事件.事件修饰符。简写为 @事件.事件修饰符。

所有事件一览

computed 计算属性：

用来对页面数据，处理。如：展示一个学习成绩表。总分可以作为一个计算属性，无需后端提供。

component 组件：

封装一块html代码，也包含的标签的事件。

平行组件的通信：

通过vue的Event,实现通信。放入：event.$emit('key',vlue);.取出：event.$on('key',function(data){}

directive 自定义指令：

定义自定义指令，获得自定义指令的，信息，对数据处理。

Vue.directive('tips',function (el,binding) {console.log(el);//元素本身  <span >tips:xxx</span>console.log(binding);//指令的值。 showconsole.log(binding.modifiers);//获得指令修饰符 leftconsole.log(binding.arg);//获得指令的传参 warnel.style.color = binding;})

slot 插槽：

类似于实现了标签模块的placeholder.

三、遇到的问题

设置多个new Vue，之后，定义的组件事件失效。没有报错。（）

设置自定义组件，使用<template>必须要用一个div包含里面的内容。

四、实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.active{color:green}</style>
</head>
<body><ul><li><a href="#vmodel">v-model</a></li><li><a href="#von">v-on事件处理</a></li><li><a href="#vbind">v-bind</a></li><li><a href="#vif">v-if控制流</a></li></ul><span>入门</span><div id="app">{{text}}</div><div id="app2"><input type="text" v-model="text2"><h3>v-show</h3><span>如果有数据就显示text2:</span><span v-show="text2">text2:{{text2}}</span><h3>v-if see=true</h3><span v-if="see">you see it</span><span v-if="!see">you don't see it.</span><h3>v-for </h3>   <span>遍历数据展示</span><ul><h4>对象属性列表</h4><li v-for="item in items">item.name: {{item.name}}</li><li>------对象列表------</li><li v-for="item in items2">item: {{item}}</li></ul><h3 id="vbind">v-bind</h3><span>使用v-bind可以把数据与html标签中的属性绑定</span><div><img v-bind:src="img" alt=""></div><span>使用v-bind,将样式类名与值绑定。v-bind:class="" 简写 :class="{类名： 变量名}"</span></br><span>原样式颜色 color</span></br><span :class="{active: isTrue}">isTrue=true的颜色 color</span></div>
<div id="app3">
<h3 id="von">v-on指令，绑定事件</h3>
<span>v-on:事件，如v-on:click = "function(arg...)"</span><button v-on:click="myfun()">click</button><h3>v-on:事件.时间修饰符。 简写@事件.事件修饰符</h3>
<ul><li><span>v-on:click.stop 停止冒泡事件</span></li><li><span>v-on:keyup.keycode 如：v-on:keyup.13 vue提供按键别名 v-on:keyup.enter</span><input type="text" v-on:keyup.enter="getcode($event)"></li><li><span>v-on:change <input type="text" @change="myfun()"></span></li></ul> <h3 id="vmodel">on-model.修饰符 </h3>
<span>   如：v-model.lazy 懒加载，相当于触发change事件，触发更新数据 </span>
<span>   如：v-model.trim 去空格 </span>
<span>   如：v-model.number 设置数字类型变量</span><h4>单选框radio</h4>
male<input type="radio" v-model="sex" value="male">
female<input type="radio" v-model="sex" value="female">
</br>
<span>sex:{{sex}}</span><h4>多选框checkbox</h4>
cai1<input type="checkbox" v-model="veg" value="veg1">
cai2<input type="checkbox" v-model="veg" value="veg2">
</br>
<span>veg:{{veg}}</span>
<h4>单选</h4>
<select name="" v-model="singS1"><option value="1">v1</option><option value="2">v2</option><option value="3">v3</option><option value="4">v4</option></select>
<span>单选singS1:{{singS1}}</span>
<h4>多选</h4>
<select name="" v-model="singS2" multiple><option value="1">v1</option><option value="2">v2</option><option value="3">v3</option><option value="4">v4</option></select>
<span>多选singS2:{{singS2}}</span><h3 id="vif">控制流指令</h3>
<span>role:'{{role}}'</span>
<div v-if="role == 'admin'">role is admin
</div>
<div v-else-if = "role == hr">role is hr
</div>
<div v-else>v-else
</div><h3>计算属性</h3>
<span>在 new Vue中定义computed:{属性：function(){}}}</span>
<table border="1"><th>科目</th><th>分数</th><tbody><tr><td>数学</td><td><input type="text" v-model.number="math"></td></tr><tr><td>物理</td><td><input type="text" v-model.number="phy"></td></tr><tr><td>英语</td><td><input type="text" v-model.number="eng"></td></tr><tr><td>sum</td><td>{{sum}}</td></tr><tr><td>avg</td><td>{{avg}}</td></tr></tbody>
</table>
</div><!-- <script src="./js/vue.min.js"></script> --><script src="./js/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script ">
/*组件*/
Vue.component('myA',
{tempalte:'#myA',props: ['username'],methods:{myc:function () {console.log(this.username);}}})Vue.component('user',
{tempalte:'<h1>username:{{username}}<h1>',props: ['username'],methods:{myc:function () {console.log(this.username);}}})
new Vue({el:"#app4"})
// 注册new Vue({el:"#app",data:{text:"hello Vue js!"}})new Vue({
el:"#app2",
data:{text2:"hello Vue js!",see:true,items:[{name:"zxc"},{name:"xxx"}],items2:{url:"text.com",num:1,count:2},img:"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d8d48aa8a151f3dedcb2bf64a4eff0ec/4610b912c8fcc3ce863f8b519c45d688d53f20d0.jpg",isTrue:true
}})new Vue ({el:"#app3",data:{sex:"female",veg:[],singS1:[],singS2:[],role:'admin',math:50,phy:50,eng:50},computed: {sum:function(){return this.math +this.phy+this.eng;},avg:function () {return this.sum/3;}},methods:{/**函数名：function（参数） */myfun:function(){alert("click");},getcode:function(e){var a = e.keyCode;console.log("key code:" + a);}}
})</script>
</body></html>

【前端VUE的学习】相关推荐

菜鸟学习----前端vue.js学习01
菜鸟学习----前端vue.js学习01 项目使用vue.js脚手架,构建项目 1.vue.js构建登录框登录框架构使用element ui Tabs 标签页,构建基础样式.用户登录,二维码查询,编 ...
前端vue基础学习之vue项目文件结构
vue项目文件结构查看上一篇前端基础学习之vue的生命周期 build文件用于打包创建dist目录 webpack.base.conf.js alias配置别名 config index.js ho ...
前端VUE框架学习总结与分享
开发环境 node v10.13.0 官网编辑器: VS Code 插件 1. vutur ,为 vue 文件提供代码高亮 2. Indent-Rainbow ,让缩进的区域以彩色色块显示构建自己 ...
后端学习前端 Vue 框架基础知识
文章目录一.Vue 基础语法学习 1.Vue 语法指令 2.Vue 实例属性 (1)el (2)data (3)methods (4)computed 3.事件修饰符 4.按键修饰符 5.Vue实例 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
C4前端云原生学习笔记——vue
C4前端云原生学习笔记文章目录 C4前端云原生学习笔记一.vue知识点 1.vue简介 2.开发工具 3.初识vue 一.vue知识点 1.vue简介官网:cn.vuejs.org 渐进式框架: ...
web前端 vue、react、angular三大框架对比与jquery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发
所属专栏: Vue 开发学习进步说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手 ...

【前端VUE的学习】