vue的学习(上)

时间：2022-11-23 16:30:00 8px连接器cn

前言:

本文主要讲一下vue 基本语法，！

这里可以直接看他的语雀笔记Vue核心 Vue简介初识 · 语雀 (yuque.com)

啊啊啊，他写得太好了，建议直接看他的，如果你愿意多看看我，就都看吧。

vue简介及环境建设：

若建议不要使用管理员cmd

选择器类别小贴士

vue相关前端配置

引入vue包或下载：

//开发版:  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>  //生产版：  <script src="https://cdn.jsdelivr.net/npm/vue">script>   //通过相对路径引入: <script src="./js/vue.js">script>

vue基本介绍:

想让Vue工作必须创造Vue例子，并将配置对象输入

root 容器中的代码仍然一致html规范，只是混合了一些特殊的Vue语法

root 容器中的代码被称为Vue模板

Vue 实例与容器一一对应

只有一个真正的发展Vue例子将与组件一起使用

{ {xxx}}中的 xxx 要写 js 表达式，且 xxx 可自动读取data所有属性

一旦data如果数据在模板中发生变化，数据将自动更新

注意区分：js 表达式和 js代码(语句)

js表达式:表达式会产生一个值，可以放在任何需要值的地方 a a b  demo(1)  x === y ? 'a' : 'b' js代码(语句) if(){ 
        }  for(){ 
        }

第一个简单的vue程序:

DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />    <title>初识Vuetitle>

    
    <script type="text/javascript" src="../js/vue.js">script>

  head>
  <body>

    
    <div id="demo">
      <h1>Hello，{
    
       { name.toUpperCase() }}，{
    
       { address }}h1>
    div>

    <script type="text/javascript" > Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 // 创建Vue实例 new Vue({ 
           el: '#demo', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串 data: { 
           // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象 name: 'cess', address: '成都' } }) script>
  body>
html>

常用指令:

v-test和v-html:

当我们网速很慢或者javascript出错时，会显示{undefined{xxx}}；Vue提供的v-text、v-html可以解决这个问题；

v-test

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令title>
head>

<body>
    <div id="app">
        
        <h2 v-text="message+'!'">成都h2>
        <h2 v-text="info+'!'">成都h2>
        <h2>{
    
       { message +'!'}}--成都h2>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script> var app = new Vue({ 
           el:"#app", data:{ 
           message:"兴趣使然的小小!!!", info:"计算机学院" } }) script>
body>

html>

v-html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html指令title>
head>

<body>
    <div id="app">
        
        <p v-text="content">p>
        <p v-html="content">p>
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script> var app = new Vue({ 
           el:"#app", data:{ 
           content:"兴趣使然的小小", content:"兴趣使然的小小" } }) script>
body>

html>

(事件监听)v-on:

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码；

@为v-on的缩写!

@click为v-on:click

@dblclick为v-on:dblclick

一些按键事件@keydown和@keyup

DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>键盘事件title>
    
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>

    <div id="root">
      <h2>欢迎打开{
    
       {name}}笔记h2>
      <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><br/>
      <input type="text" placeholder="按下tab提示输入" @keydown.tab="showInfo"><br/>
      <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"><br/>
    div>

    <script type="text/javascript"> Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 // 定义了一个别名按键 new Vue({ 
           el: '#root', data: { 
           name: 'cess' }, methods: { 
           showInfo(e) { 
           // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) script>
  body>
html>

使用v-on:xxx或@xxx绑定事件，其中 xxx 是事件名

事件的回调需要配置在methods对象中，最终会在vm上

methods中配置的函数，不要用箭头函数，否则 this 就不是vm了

methods中配置的函数，都是被 Vue所管理的函数，this 的指向是vm或组件实例对象

@click="demo"和@click="demo($event)"效果一致，但后者可以传参

demo2

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>事件的基本使用title>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>

<div id="root">
    <h2>欢迎来看{
    
       {name}}的笔记h2>
    
    <button @click="showInfo1">点我提示信息1（不传参）button>
    <button @click="showInfo2($event,66)">点我提示信息2（传参）button>
div>

<script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ 
           el: '#root', data: { 
           name: '小小', }, methods: { 
           showInfo1(event) { 
           console.log(event.target.innerText) // console.log(this) // 此处的this是vm alert('同学你好！') }, showInfo2(event, number) { 
           console.log(event, number) console.log(event.target.innerText) // console.log(this) // 此处的this是vm alert('同学你好！！'+number) } } }) script>
body>
html>

更多的事件处理Vue核心事件处理 · 语雀 (yuque.com)

demo3

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>事件修饰符title>
    
    <script type="text/javascript" src="../js/vue.js">script>
    <style> * { 
          margin-top: 20px;} .demo1 { 
          height: 50px;background-color: skyblue;} .box1 { 
          padding: 5px;background-color: skyblue;} .box2 { 
          padding: 5px;background-color: white;} .list { 
          width: 200px;height: 200px;background-color: skyblue;overflow: auto;} li { 
          height: 100px;} style>
head>
<body>

<div id="root">
    <h2>欢迎来到{
    
       { name }}学习h2>
    
    <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息a>

    
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息button>
        
        
    div>

    
    <button @click.once="showInfo">点我提示信息button>

    
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        div>
    div>

    
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息button>
    div>

    
    
    
    <ul @wheel.passive="demo" class="list">
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
    ul>
div>

<script type="text/javascript"> Vue.config.productionTip = false new Vue({ 
           el: '#root', data: { 
           name: '尚硅谷' }, methods: { 
           showInfo(e) { 
           alert('同学你好！') // console.log(e.target) }, showMsg(msg) { 
           console.log(msg) }, demo() { 
           for (let i = 0; i < 100000; i++) { 
           console.log('#') } console.log('累坏了') } } }) script>
body>
html>

(数据绑定)v-model:

Vue中有两种数据绑定的方式:

单向绑定v-bind数据只能从data流向页面
双向绑定v-model数据不仅能从data流向页面, 还可以从页面流向data

获取和设置表单元素的值(双向数据绑定)

demo1:

DOCTYPE html 
            锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

vue的学习(上)

相关文章