【Vue】Vue快速入门、Vue常用指令、Vue的生命周期

简介: 【Vue】Vue快速入门、Vue常用指令、Vue的生命周期

一、 Vue快速入门

  • 1.新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
  • 2.在JS代码区域,创建Vue核心对象,进行数据绑定
<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data() {
            return {
                username:""
            }
        }
    });
</script>
  • 3.编写视图
<div id="app">
    <input v-model="username">
    <!-- 插值表达式 -->
    {{username}}
</div> 

二、Vue常用指令

  • 指令:HTML标签上带有Vs前缀的特殊属性,不同指令具有不同含义。例如:V-if,V-for…
  • 常用指令:
指令 作用
v-bind 为HTML标签绑定属性值,如设置href,css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的是display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性

2.1 v-bind&v-model

<div id="app">
    <a v-bind:href="url">点击</a>
    <input v-model="url">
</div>   
<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data() {
            return {
                username:"",
                url:"http:www.baidu.com"
            }
        }
    });
</script>

2.2 v-on

<div id="app">
    <input type="button" value="按钮" v-on:click="show()"><br>
    <input type="button" value="按钮" @click="show()">
</div> 
<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        methods:{
            show() {
                alert("我被点了");
            }
        }
    });
</script>

2.3 v-if

<div id="app">
    <div v-if="count==1">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>
    <input v-model="count">
</div>    
<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3
            }
        }
    });
</script>

2.4 v-show

<div id="app">
    <input v-model="count">
    <div v-show="count==4">div4 v-show</div>
</div>   
<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3
            }
        }
    });
</script>

2.5 v-for

  • v-for内addr是自定义参数,addrs表示Vue返回的数组addrs[“北京”,“上海”,“广州”]
<div id="app">
    <div v-for="addr in addrs">
        {{addr}}<br>
</div>  
<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3,
                addrs:["北京","上海","广州"]
            }
        }
    });
</script>

加索引:

<div id="app">
    <div v-for="(addr,i) in addrs">
        {{i + 1}} -- {{addr}}<br>
</div>  

三、Vue的生命周期

  • Vue的生命周期分为八个阶段,每触发一个生命周期事件,会自动执行一个生命周期的方法
状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestory 销毁前
desoryed 销毁后
  • mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。
  • 发送异步请求,加载数据
相关文章
|
2天前
|
JavaScript
|
3天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
5天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
60 7
使用 Vue CLI 脚手架生成 Vue 项目
|
6天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
6天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
15 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1003 0
|
14天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
25 1
|
8天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
22 0
|
8天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
23 2
|
8天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
15 3