一什么是Vue?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。渐进式: 构建项目可以由简单到复杂。

通俗的语言：就是有很多设计好的API工具，降低前端编码量，减少不必要的重复开发时间，让大家更有效的用于开发业务上。

二 Vue的优点

1).体积小压缩后的文件只有33k
2).运行效率更高采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3).双向数据绑定让开发者不再去操作DOM,将更多的经历投入到业务中
4).生态丰富市面上有大量的开源项目基于vue 进行开发成熟稳定.

三 Vue常见的几个应用

1.1入门案例

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>hello 入门案例</title>
   </head>
   <body>
       <div id="app">
           <h1>双向数据绑定测试</h1>
           <h3>{{ hello }}</h3>
       </div>


       
       <script src="../js/vue.js"></script>
       <script type="text/javascript">
           const app = new Vue({
               //element 元素
               el: "#app",
               data: {
                   hello: "helloVue"
               }
           })
       </script>
   </body>
</html>

2.常见的指令

2.1v-text 指令

作用: 直接展现解析数据

<h3 v-text="text"></h3>
   
       <script src="../js/vue.js"></script>
       <script type="text/javascript">
           const app = new Vue({
               //element 元素
               el: "#app",
               data: {
                   hello: "helloVue",
                   text: "数据绑定text"
               }
           })
       </script>

2.2v-once 指令

用法:
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

2.3v-model 指令--重要

用法: 在表单控件或者组件上创建双向绑定,当js数据修改时,页面内容变化, 当页面内容修改时,则数据变化.

2.4v-on指令--重要

1). <button v-on:click="num++">增加1</button>   绑定点击事件
2).<button @click="num++">增加1</button>           简化写法
3).<button @click="addNum">增加1</button>

2.5按键修饰符

3.常见的几个语法

3.1for循环

<div id="app">
           
           <span v-for="item in hobby">{{item}}</span>
           
           <span v-for="item in hobby" v-text="item"></span>
           
           <span v-for="(item,index) in hobby" v-text="index"></span>

           
           <div v-for="item in users" :key="item.id">
                   <span v-text="item.id"></span>
                   <span v-text="item.name"></span>
           </div>

           
           <div v-for="(value,key,index) in user">
               <span v-text="key"></span>
               <span v-text="value"></span>
               <span v-text="index"></span>
           </div>
       </div>

       <script src="../js/vue.js"></script>
       <script>
           const app = new Vue({
               el : "#app",
               data : {
                   hobby: ['吃','喝','玩','乐'],
                   users: [{
                       id: 100,
                       name: '王昭君'
                   },{
                       id: 101,
                       name: '安琪拉'
                   }],
                   user: {
                       id: 1,
                       name: '张三',
                       age: 18
                   }
               }
           })
       </script>

3.2分支结构

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>分支结构语法</title>
   </head>
   <body>
       <div id="app" align="center">
           <h1>根据根据分数评级</h1>
           
           <div v-if="score>=90">优秀</div>
           <div v-else-if="score>=80">良好</div>
           <div v-else-if="score>=70">中等</div>
           <div v-else>不及格</div>

           
           <div v-show="flag">测试show数据</div>
           <button @click="flag= !flag">展现</button>
       </div>

       <script src="../js/vue.js"></script>
       <script>
           const app = new Vue({
               el: "#app",
               data: {
                   //定义分数
                   score: 100,
                   flag: false
               }
           })
       </script>
   </body>
</html>

4.常见的几个表单属性

input 文本输入框
textarea 多行文本
select 下拉多选框
radio 单选框
checkbok 多选框

四Vue的生命周期

五Vue的组件化

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>组件注册</title>
   </head>
   <body>

       <div id="app">
           
           <add-num-component></add-num-component>

           
           <add-num-component></add-num-component>
           <add-num-component></add-num-component>
       </div>

       
       <template id="addNumTem">
           <div>
               数值: {{num}}
               <button @click="addNum">添加</button>
           </div>
       </template>

       
       <script src="../js/vue.js"></script>
       <script>

           //1.定义组件 Vue.component('组件名称',组件实体内容)
           Vue.component('addNumComponent',{
               data(){
                   return {
                       num: 0
                   }
               },
               //与template标签进行关联注意使用选择器
               template: "#addNumTem",
               methods: {
                   addNum(){
                       this.num ++
                   }
               }
           })


           const app = new Vue({
               el : "#app",
               data : {

               }
           })
       </script>
   </body>
</html>

原文链接：https://blog.csdn.net/weixin_58078203/article/details/118518080

一 什么是Vue?