狂神说Vue实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/chenhangx/article/details/104717826

本指南深入讲解Vue.js核心概念，包括双向数据绑定、事件处理、组件通信、路由管理等，适合初学者快速上手并掌握Vue开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

狂神说 Vue笔记

双向数据绑定
路由

Node和NPM

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

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

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

npm install nrm -g

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库
有教程推荐大家使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。

快速入门

使用CDN

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//方式2
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

推荐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:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        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中引入依赖：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

新建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对象
})

页面跳转控制：

<div id="app">
    <!--router-link来指定跳转的路径-->
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <div>
        <!--vue-router的锚点-->
        <router-view></router-view>
    </div>
</div>