Vue快速入门，基础知识点排查

最新推荐文章于 2022-04-26 10:12:55 发布

柠笙

最新推荐文章于 2022-04-26 10:12:55 发布

阅读量570

点赞数

分类专栏：前端文章标签：前端 vue.js 前端框架

本文链接：https://blog.csdn.net/weixin_53024882/article/details/121479927

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue基础

Vue的安装及使用
Vue的创建
Vue的常用操作
一般语法
Vue的监听
Vue组件（类似轮子：封装好的demo）
- 父组件与子组件之间的通信
Vue指令

Vue的安装及使用

1、在 Vue.js 的官网上直接下载 vue.min.js ，并用 script 标签引入。

等到应用需要越来越多的前端库和前端框架的时候，一个一个在HTML文件中引入会很不方便

2、使用CDN方法引用

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js （会保持和 npm 发布的最新的版本一致）
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3、NPM方法

npm是做包依赖管理的工具，配合其他的包使用开发的推荐下载方式。
开发时可使用诸如require(‘vue’)，import(‘vue’) 模块化方案开发，你可以使用vue-cli起一个项目体验下。
使用npm安装Vue可以方便包管理。
npm方式可以直接使用Vue命令，使用webpack工具，创建项目。

Vue的创建

1、自己搭建的Vue测试

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',    //div盒子的id
  data: {
    message: 'Hello Vue.js!'    //数据参数
  }
})
</script>
</body>
</html>

2、黑窗口创建Vue项目

vue webpack + 项目名称

Vue的常用操作

用户输入双向绑定（input输入的内容message会自动更新）

v-model 指令用来在 input、select、textarea、checkbox、radio
等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
语法：v-model=“变量名”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

绑定变量的参数值|绑定属性

语法：（v-bind+变量名=“参数名”）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
    .active {
        width:20px;
        height:20px;
        background-color:red;
    }
</style>
    
</head>
<body>
    <div id="app">
        <pre><a v-bind:href="url">百度</a></pre>
        <div v-bind:class="{ 'active' : isactive }">
        </div>
    </div>
</body>
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com',
    isactive:true
  }
})
</script>
</html>

绑定函数监听事件

语法：（v-on：+触发事件=“函数名”）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转字符串</button>
        </div>

        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Runoob!'
                },
                methods: {
                    reverseMessage: function() {
                        this.message = this.message.split('').reverse().join('')
                    }
                }
            })
        </script>
    </body>
</html>

过滤器

单层过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | suibian }}
    <!-- 这里的message是变量，|之后的是过滤器名称 -->
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'like'
  },
  filters: {
      //先定义过滤器的名称，随便取
    suibian: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

多层过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | p1 | p2}}
    <!-- 这里的message是变量，|之后的是过滤器名称 -->
    <!-- 先执行p1,再执行p2 -->
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'like'
  },
  filters: {
    //第一个过滤器
    p1: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    //第二个过滤器
    p2: function (value) {
      if (!value) return ''
      value = value.toString()
      return value + ' you'
    }
  }
})
</script>
</body>
</html>

两个缩写（熟练之后可以用）

v-bind:href=“url” = :href=“url”
v-on:click=“do” = @:click=“do”

一般语法

条件判断 v-if=“变量” v-else-if=“变量” v-else
显示判断 v-show =“变量” （true显示，false不显示）
循环 v-for=“value in array” 迭代对象 v-for=“value in object”
v-for=“{key，value} in object”

Vue的监听

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
   <body>
      <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
       <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
            // 这个回调将在 vm.kilometers 改变后调用
            document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
        })
      </script>
   </body>
</html>

Vue组件（类似轮子：封装好的demo）

组件化开发，提高代码复用率
实用网站：Element （先安装）

父组件与子组件之间的通信

<!-- 子组件 -->
<template>
    <h3>{{message}}</h3>
</template>
<script>
      export default {
          props: ['message'] //声明一个自定义的属性
       }
</script>

<!-- 父组件 -->
        <template>
            <div>
                <h1>我是父组件！</h1>
                <child message="msg"></child> //通过自定义属性传递数据
            </div>
        </template>
        <script>
            import Child from '../components/child.vue' //引用子组件
            export default {
                components: {
                    Child
                }, //注册子组件
                data() {
                    return {
                        msg: '我是子组件！'
                    }
                } //父组件的数据 动态调整子组件的数据
            }
        </script>

Vue指令

//全局
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus>
        </div>
        <script>
            // 注册一个全局自定义指令 v-focusVue.directive('focus', {  // 当绑定元素插入到 DOM 中。  inserted: function (el) {    // 聚焦元素    el.focus()  }})// 创建根实例new Vue({  el: '#app'})
        </script>
    </body>
</html>//局部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus>
        </div>
        <script>
            // 创建根实例new Vue({  el: '#app',  directives: {    // 注册一个局部的自定义指令 v-focus    focus: {      // 指令的定义      inserted: function (el) {        // 聚焦元素        el.focus()      }    }  }})
        </script>
    </body>
</html>

柠笙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue快速入门，基础知识点排查

Vue基础Vue的安装及使用Vue的创建Vue的常用操作用户输入双向绑定（input输入的内容message会自动更新）绑定变量的参数值|绑定属性绑定函数监听事件过滤器单层过滤器多层过滤器两个缩写（熟练之后可以用）一般语法Vue的监听Vue组件（类似轮子：封装好的demo）父组件与子组件之间的通信Vue指令Vue的安装及使用1、在 Vue.js 的官网上直接下载 vue.min.js ，并用 script 标签引入。等到应用需要越来越多的前端库和前端框架的时候，一个一个在HTML文件中引入会很不方便
复制链接

扫一扫