本文共 2385 字，大约阅读时间需要 7 分钟。

Node和NPM

NPM(类似maven)是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

推荐一款切换镜像的工具：nrm

我们首先安装nrm，这里-g代表全局安装。

npm install nrm -g

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库

有教程推荐大家使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。

快速入门

• 使用CDN

• 推荐npm安装
  -在idea的左下角，有个Terminal按钮，点击打hello控制台：
  -进入hello-vue目录，先输入：npm init -y 进行初始化
  安装Vue，输入命令：npm install vue --save(局部)
  然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。
  

html模板

• 插值表达式，声明式渲染
  {
  {}}：插值表达式，声明式渲染，单向，会出现插值闪烁 (常用)
  v-text：把所有的内容当做文本渲染
  v-html：识别js html css渲染
• 双向渲染:双向绑定
  v-model:双向渲染，在表单元素中使用。
• 事件:v-on 简写@
  v-on:事件名：v-on:click=“js表达式或者函数名”
  @click 点击事件
  @contextMenu 右击事件 .prevent:禁用默认事件
  @keyup: 键盘事件
  .enter(13):回车键盘事件
• v-for: 遍历
  数组 v-for="(item,index) in items"
  对象v-for="(val, key, index) in user"
  :key:提高渲染速度
• v-if:判断
  v-if=“布尔表达式”: true-渲染,false-不渲染
• v-show=“布尔表达式”:总是渲染，false-display: none
  v-else-if=“布尔表达式”
  v-else :else:一 定要紧跟在if之后
• v-bind:绑定属性，简写(:)
  :class="{active: 布尔表达式}"

vue实例

el: “#app” // 选择器,对应html模板,vue实例的作用范围

data: {数据模型} methods: {定义方法} created(){加载数据} commputed:定义计算展性，计算本质就是方法，但是方法必须有返回值，计算属性可以像数据模型一样使用。如果计算属性的依赖项没有改变，直接从缓存中命中 watch: 监听,方法名是message(newVal,oldVal){} 钩子函数：初始化（new Vue()） 模板加载 视图渲染 更新 销毁 。 created：加载数据模型 components:局部子组件 ------全局组件

Vue.component("counter",{
           template:'你点了我 {
   { count }} 次，我记住了.',        data(){
               return {
                   count:0            }        },        methods,watch    })

------局部组件

const counter = {
   同上}

组件的通信:

1.父向子通信: a.父自定义属性，属性名随便写，属性值是要传递的数据模型b. 子通过props接收，参数名是自定义属性的属性名[“属性名”] {属性名:{type: default: [], required: true 2.子向父通信: a.父自定义事件，事件名随便写，属性值是要传递的方法b.定义事件调用子自 己的方法，子的方法中通过this.$emit(“自定义事件名”) 路由vue-router

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：

在index.html中引入依赖：

新建vue-router对象，并且指定路由规则：

// 创建VueRouter对象const router = new VueRouter({
       routes:[ // 编写路由规则        {
               path:"/login", // 请求路径，以“/”开头            component:loginForm // 组件名称        },        {
               path:"/register",            component:registerForm        }    ]})

引入router对象

var vm = new Vue({
       el:"#app",    components:{
   // 引用登录和注册组件        loginForm,        registerForm    },    router // 引用上面定义的router对象})

页面跳转控制：

   
    
        
    
     
      登录
         
    
     
      注册
         
    
    
    
        
             
         
    
   

• 通过来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
• 通过指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

---

转载地址：http://gvxab.baihongyu.com/