vue第一天认识vue与vue基本使用

最新推荐文章于 2023-03-04 23:58:32 发布

她还会来吗

最新推荐文章于 2023-03-04 23:58:32 发布

阅读量246

点赞数 1

分类专栏： Vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/m0_53895172/article/details/114167231

版权

Vue 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

认识vuejs

vue是一个渐进式的框架,渐进式意味着你可以将vue作为你应用的一部分嵌入其中,带来更丰富的交互体验

vue有很多特点和web开发中常见的高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

vue.js安装

网址:cn.vuejs.org
下载并将其引入到编辑器中,使用时引入到页面中就行

vue基本使用

需要提供标签
引入vue.js库文件
可以使用vue的语法做功能了
把vue提供的数据填充到标签里面
实例参数分析: el:元素的挂载位置(值可以是css选择器或者DOM元素)
data:模型数据(值是一个对象)
插值表达式用法:将数据填充到HTML标签中
插值表达式支持基本的计算操作{{}}
vue代码运行原理分析:概述编译过程的概念(vue语法->原生语法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
     <!-- 插值表达式 -->
      {{message}}
    </div>
    <script src="./vue.js"></script>
    <script>
        // 创建vue实例
        const vm = new Vue({
            el:'#app',//用于挂载要管理的元素
            data:{// 定义数据
              message:'你好呀,李焕英'
            }
        })
    </script>
</body>
</html>

vue模板语法

如何理解前端渲染:把数据填充到HTML标签中
前端渲染方式:原生js拼接字符串:
缺点: 不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来
使用前端模板引擎:
优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护
缺点:没有专门提供事件机制
模板语法:
指令: 1. 指令的本质就是自定义属性指令格式:以v开始
2. v-cloak指令用法:插值表达式存在的问题:‘闪动’,如何解决该问题:使用该指令,解决该问题的原理:先隐藏,替换好值之后在显示最终的值
指令用法:提供样式:[v-cloak]{
display:none;
}在插值表达式中添加该指令背后原理:先通过样式隐藏内容,然后在内存中进行样式的替换,替换好后在显示最终的结果
v-text填充纯文本；直接添加到标签中
v-html填充html片段:本网站内部数据可以使用,来自第三方的数据不可用缺点:存在隐患,易受到xss攻击
v-pre填充原始信息:显示原始信息,跳过编译过程(分析编译过程)
v-bind:动态绑定属性缩写: :bind
数据响应式:
如何理解响应式:html5中的响应式(屏幕尺寸的变化导致样式的变化)
数据的响应式(数据的变化导致页面内容的变化)
什么是数据绑定:数据绑定:将数据填充到标签中
v-once只编译一次:显示内容之后不再具有响应式功能

案例:简单计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            outline: none;
        }
    </style>
</head>
<body>
   <div id="app">
    <div class="jsa"> <label for="">数值A</label><input type="text" v-model='b'></div>
    <div class="jsb"><label for="">数值B</label> <input type="text" v-model='a'></div>
     <button v-on:click='handel' >计算</button>
     <div>计算结果: <span v-text='result'> </span></div>
   </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            a:'',
            b:'',
            result:''
        },
        methods:{
              handel:function(){
                  this.result = parseInt(this.a) + parseInt(this.b);
              }
        }

    });
</script>
</html>

样式绑定

v-bind:class="{active:isactive}" {类名: 布尔值}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active{
        color: red;
    }
    .error{
        font-size: 20px;
    }
</style>
<body>
    <div id="app">
      <div v-bind:class="{active:isactive,error:iserror}">
          {{message}}
      </div>
       <script src="./vue.js"></script>
       <script>
           const vm = new Vue({
               el:'#app',
               data:{
                 message:'你好呀',
                 isactive:true,
                 iserror:true
               }
           })
       </script>
</body>
</html>

v-bind:class="[activeClass,errorClass]"

<style>
    .active{
        color: red;
    }
    .error{
        font-size: 100px;
    }
</style>
<body>
    <div id="app">
      <div v-bind:class="[activeClass,errorClass]">
          {{message1}}
      </div>
       <script src="./vue.js"></script>
       <script>
           const vm = new Vue({
               el:'#app',
               data:{
                 message1:'长夜将至',
                 activeClass:'active',
                 errorClass:'error'
               }
           })
       </script>
</body>

v-bind:style="{css属性名:value}"

 <div id="app">
      <div v-bind:style="{color:'red',fontsize:'10px'}">
          {{message}}
      </div>
      <div v-bind:style="[basestyle,errorstyle]">
          {{message1}}
      </div>
       </div>
       <script src="./vue.js"></script>
       <script>
           const vm = new Vue({
               el:'#app',
               data:{
                 message:'你好呀',
                 message1:'长夜将至',
                 basestyle:{
                     color:'red',
                 },
                 errorstyle:{
                     fontSize:'100px'
                 }
               }
           })
       </script>

样式绑定相关语法细节:

对象绑定和数组绑定可以结合使用
class绑定的值可以简化操作
默认的class如何处理默认的不会被覆盖会被保留

计算属性

 <div id="app">
        <h2> {{fullname}}</h2>
       </div>
       <script src="./vue.js"></script>
       <script>
           const vm = new Vue({
               el:'#app',
               data:{
                  firstname:'Tom',
                  lastname:'Jerry'
               },
               // 计算属性
               computed:{
                   fullname:function(){
                return this.firstname + ' ' + this.lastname;
                   }
               }
           })
       </script>

计算属性与方法的区别

计算属性是基于他们的依赖进行缓存的
方法不存在缓存
如果多次使用时,建议采用计算属性

她还会来吗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
vue第一天认识vue与vue基本使用

vue第一天认识vuejsvue是一个渐进式的框架,渐进式意味着你可以将vue作为你应用的一部分嵌入其中,带来更丰富的交互体验vue有很多特点和web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOMvue.js安装网址:cn.vuejs.org下载并将其引入到编辑器中,使用时引入到页面中就行vue基本使用需要提供标签引入vue.js库文件可以使用vue的语法做功能了把vue提供的数据填充到标签里面实例参数分析: el:元素的挂载位置(值可以是c
复制链接

扫一扫