Vue基础学习

再铸煌辉

已于 2022-04-16 18:39:32 修改

阅读量730

点赞数 1

文章标签： vue.js

于 2022-04-06 22:30:06 首次发布

本文链接：https://blog.csdn.net/qq_44815846/article/details/123983038

版权

1.Vue标准语法，及引用

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>浏览器标题</title>
        <link rel="stylesheet" href="外部CSS.css">
        <link rel="author" href="humans.txt">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!-- 调用Vue语法 -->
    </head>
    <body >

        <div id = 've'>
            <h1>大家好，我是{{name}}</h1>
        </div>
        <script>
          new Vue({
            el:'#ve',
            data:{
                name:'郭某人'
            }
          })

        </script>
    </body>
</html>

2.插入值语法

<h1>大家好，我是{{name}}</h1>

2.指令语法

//单向绑定
<a v-bind:href = 'url' >跳转百度</a>
<a :href = 'url' >跳转百度</a>
//双向绑定（仅用于表单）
<input type="text" v-model:value="date">
<input type="text" v-model="date">

3.实例绑定的两种方法

//方法一：
var a = new Vue({ el="#ve" })

//方法二：
var a = new Vue({})
a.&mount('#ve')

4.Vue中的点击事件

    <body >
        <div id = 've'>
            <button v-on:click = 'mot' >点我一下</button>
            <button @click = 'mot2($event,66)' >点我一下2</button>
        </div>
        <script>
          new Vue({
            el:'#ve',
            methods:{
                mot(){
                    alert('大家好')
                },
                mot2(event,p1){
                    console.log(event);
                    console.log(p1);
                }
            }
          })
        </script>
    </body>

5.事件的修饰符

<button @click.prevent = 'mot' >点我一下</button>
//precent  阻止默认事件
//stop     阻止事件冒泡
//once     事件只触发一次
//capture  使用事件的捕获模式
//self     只有event.target是当前操作元素的时候才触发事件；
//passive  事件的默认行为立即执行，无需等待事件回调执行完毕

6.键盘事件

 <input type="text" @keyup.enter = "mot">

//表示ctrl+y
 <input type="text" @keyup.ctrl.y = "mot">

回车=> enter
删除=> delete ( 捕获“删除”和“退格"键)
退出=>esc
空格=> space
换行=>tab（建议使用keydown）
上=>up
下=> down
左=>left
右=>right

(另外也可以使用特殊键的全拼、或者按键编码 )

7.计算属性及调用（computed）

            computed:{
                xy:{
                    get(){
                        return this.x + this.y
                    }
                    set（value）{}
                }

//简写属性 
computed:{
    xy(){
      return this.x + this.y
     }
  }

8.监视属性watch

             watch: {
               name:{
                    immediate:true,//默认为false
                    deep:true,//默认为false
                    handler(a,b){
                        console.log("新值："+a+",旧值："+b);
                    }
                  }
                }


watch: {
                name(newValue,oldValue ){
                    console.log("监视了"+newValue,oldValue);
                    }
                }

9样式的绑定

10.条件渲染

        <h1 v-show = 'true'>显示/隐藏1</h1>
        <template>该标签不影响节点（结构中不显示）
            <h1 v-if = 'false'>显示/隐藏2</h1>
            <h1 v-else-if = 'false'>显示/隐藏3</h1>
            <h1 v-else>显示/隐藏4</h1>
        </template>

11.循环遍历

//遍历数组对象
<div v-for = '(item,index) of Arr' :key = "index">
    <h1>{{index}}_{{item.name}}_{{item.age}}</h1>
</div>
//遍历数组
<div v-for = '(a,b) of Obj' :key = "b">
    <h1>属性：{{a}}_属性值：{{b}}</h1>
</div>
//遍历字符串
<div v-for = '(a,index) of Obj' :key = "index">
    <h1>字符：{{a}}_索引：{{index}}</h1>
</div>
//遍历次数
<div v-for = '(a,b) of 5' :key = "index">
    <h1>数字：{{a}}_索引：{{b}}</h1>
</div>

12.13.Vue表单收集

13. Vue内置指令

<h1 v-text = 'text'></h1><!-- 仅支持文本 -->
<h1 v-html = 'text'>值</h1><!-- 仅支持文本且可以编译代码····不安全 -->
<!-- vue组建没加载完毕，会露出{{n}},固可使用这个先隐藏，加载完毕后自动销毁-->
<h1 v-cloak>值</h1>
<h1 v-once>值</h1><!-- 初始化值，只加载一次 -->
<h1 v-pre>不重要</h1><!-- 跳过当前节点 -->

14. Vue自定义指令

<h1 v-big = 'nub'>值</h1>
================================
directives:{
                big(a,b){
                    console.log(b);
                    console.log(a.innerText);
                    a.innerText = b.value*10
                }
            }

15.Vue的生命周期

54.非单文件组建

<body>
    <div id="vue">
        <pin_top></pin_top>
        <pin_dibian></pin_dibian>

    </div>
    <script>
        //1.创建组件
        const pin_top = {
            template: `
            <div>
                    <h1>{{name}}</h1>
            </div>
            `,
            data() {
                return {
                    name: "菜单"
                }
            }

        }
        const pin_dibian = {
            template: `
            <div>
              <h1>{{name2}}</h1>  
            </div>
            `,
            data() {
                return {
                    name2: '备案信息'
                }
            }

        }
        //注册使用组件
        new Vue({
            el: "#vue",
            components: {
                pin_top,
                pin_dibian
            }
        })


    </script>
</body>

55.注意事项

56.组件的嵌套

<body>

    <div id="vue">
        <pin_top></pin_top>
    </div>
    <script>
        const pin_top_1 = {
            template: `
            <div><h2>{{name}}</h2></div>
            `,
            data() {
                return {
                    name: '子级'
                }
            }
        }
        const pin_top = {
            components: { pin_top_1 },
            template: `
            <div>
                <h1>{{name2}}</h1>  
                <pin_top_1></pin_top_1>   
            </div>
            `,
            data() {
                return {
                    name2: '父级'
                }
            },
        }
        new Vue({
            el: "#vue",
            components: {
                pin_top


            }
        })
    </script>
</body>

Vue 脚手架的使用

1.配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

淘宝镜像配置成功

2. 全局安装@vue/cli

npm install -g @vue/cli

注意：卡主敲回车

安装成功

输入vue测试

3.创建脚手架（放到指定位置）

找到需要放置的目录位置（切换到指定位置目录）

vue create 目录名

4. 进入这个文件夹（可以在计算机地址栏中输入cmd，直接进入dos）

npm run serve

安装成功，且运行成功

脚手架的四大模块

index.html

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

App.js

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
  <top></top>
  <top2></top2>
  </div>
</template>

<script>
import top from './components/pin_top.vue'
import top2 from './components/pin_top2.vue'

export default {
  name: 'App',
  components: {
    top,top2
  }
}
</script>

组件

<template>
  <div>
      <h1>{{fuji}}</h1>
  </div>
</template>

<script>
    export default {
        name:"pin_top",
        data(){
            return {
                fuji:"父级"
            }
        }
    }
</script>

064. vue 修改默认配置（没事别瞎修改）

065， ref 的使用

066.

67 插件

再铸煌辉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue基础学习

1.Vue标准语法，及引用<!doctype html><html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title
复制链接

扫一扫