vue入门学习（一）

最新推荐文章于 2024-09-19 11:06:34 发布
最新推荐文章于 2024-09-19 11:06:34 发布
阅读量169 收藏
点赞数
分类专栏： 前端 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43202405/article/details/120167780
版权

本次记录根据Vue官方教程以及尚硅谷视频教程。

1、HelloWord

直接上代碼，首先引入Vue.js，然后创建标准的Vm对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>

<!--
  1. 引入Vue.js
  2. 创建Vue对象
    el : 指定根element(选择器)
    data : 初始化数据(页面可以访问)
  3. 双向数据绑定 : v-model
  4. 显示数据 : {{xxx}}
  5. 理解vue的mvvm实现
-->

<!--模板-->
<div id = "app">
  <input type="text" v-model = "username">
  <p>hello {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      username: 'hello vue!'
    }
  })
</script>
<!--
mvvm:
model：模型，数据对象(data)
view:视图，模板页面
viewMoel：视图模型的实例
-->
</body>
</html>

2、模板语法

1. 模板的理解:
  动态的html页面
  包含了一些JS语法代码
    大括号表达式
    指令(以v-开头的自定义标签属性)
2. 双大括号表达式
  语法: {{exp}} 或 {{{exp}}}
  功能: 向页面输出数据
  可以调用对象的方法
3. 指令一: 强制数据绑定
  功能: 指定变化的属性值
  完整写法:
    v-bind:xxx='yyy'  //yyy会作为表达式解析执行
  简洁写法:
    :xxx='yyy'
4. 指令二: 绑定事件监听
  功能: 绑定指定事件名的回调函数
  完整写法:
    v-on:click='xxx'
  简洁写法:
    @click='xxx'


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_模板语法</title>
</head>
<body>
<!--
1. 模板的理解:
  动态的html页面
  包含了一些JS语法代码
    大括号表达式
    指令(以v-开头的自定义标签属性)
2. 双大括号表达式
  语法: {{exp}} 或 {{{exp}}}
  功能: 向页面输出数据
  可以调用对象的方法
3. 指令一: 强制数据绑定
  功能: 指定变化的属性值
  完整写法:
    v-bind:xxx='yyy'  //yyy会作为表达式解析执行
  简洁写法:
    :xxx='yyy'
4. 指令二: 绑定事件监听
  功能: 绑定指定事件名的回调函数
  完整写法:
    v-on:click='xxx'
  简洁写法:
    @click='xxx'
-->

<div id="app">
  <h2>1. 双大括号表达式</h2>
  <p>{{msg}}</p>
  <p>{{msg.toUpperCase()}}</p>
  <p v-text = "msg"></p>
  <p v-html = "msg"></p><!-- 这里会解析成一个HTML页面-->

  <h2>2. 指令一: 强制数据绑定</h2>
    <img src="imgUrl"><!-- 并不会解析-->
    <img v-bind:src="imgUrl"><!--数据的强制性绑定-->
    <img :src="imgUrl"><!--数据绑定的简单式-->

  <h2>3. 指令二: 绑定事件监听</h2>
    <button v-on:click="test1">test1</button>
    <button @click="test2(msg)">test2</button>

</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data:{
        msg:'hello,I Love You!-<a href="www.baidu.com">this is connect</a>',
        imgUrl:'https://cn.vuejs.org/images/dcloud1.png'
    },
    methods:{
        test1(){
            alert('hehe!')
        },
        test2(content){
            alert(content)
        }

    }
  })

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

3、计算属性和监视

1. 计算属性（分为）
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   const vm = new Vue({
    el: "#demo",
    data:{
      firstName:'A',
      lastName:'B',
      fullName2:'A B'
    },

    //执行时间：初始化的时候显示以及相关数据发生改变
    computed:{//计算属性中的一个方法，方法的返回值作为属性值
      fullName1(){
        return this.firstName + " " + this.lastName
      },

      // 双向的
      fullName3:{
        //什么是回调函数：1.你定义的 2.你没有调用的，3.但最终他执行了
        //需要明白问题，1.什么时候调用，2.用来做什么
        //回调函数，当需要读取当前属性值的时候回调，根据相关数据计算，并返回当前属性的值
        get(){
          return this.firstName + " " + this.lastName
        },
        //回调函数，当属性值发生改变的时候回调，更新相关的属性数据
        set(value) {
          const name = value.split(' ')
          this.firstName = name[0]
          this.lastName = name[1]
        }

      }
    },
    //配置监视
    watch:{
      firstName:function(value){//这里监视的是firstName的值
        this.fullName2 = value + ' ' + this.lastName //this指的是Vue实例化出来的对象
      }
    }
  })


  vm.$watch('lastName',function (value) {
        this.fullName2 = this.firstName + ' ' + value
  })
</script>
</body>
</html>

4、class与style的绑定

主要是进行页面的样式控制（动态）

1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .aClass {
      color: red;
    }
    .bClass {
      color: blue;
    }
    .cClass {
      font-size: 30px;
    }
  </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
  <h2>1. class绑定: :class='xxx'</h2>
  <p class="cClass" :class="a">xxx是字符串</p>
  <p  :class="{aClass:isA,bClass:isB}">xxx是字符串</p>
  <h2>2. style绑定</h2>
  <p :style="{color:activeColor,fontSize:sontSize+'px'}">xxxStyle的强制绑定</p>

  <button @click="update">更新</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data:{
      a:'aClass',
      isA:true,
      isB:false,
      activeColor:'yellow',
      sontSize:20

    },
    methods:{
      update(){
        this.a = 'bClass'
        this.isA = false
        this.isB = true
        this.activeColor = 'red'
        this.sontSize = 30

      }
    }

  })

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

5、条件渲染指令

1. 条件渲染指令
  v-if
  v-else
  v-show
2. 比较v-if与v-show
  如果需要频繁切换 v-show 较好
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_条件渲染</title>
</head>
<body>
<!--
1. 条件渲染指令
  v-if
  v-else
  v-show
2. 比较v-if与v-show
  如果需要频繁切换 v-show 较好
-->

<div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true,
    }
  })
</script>
</body>
</html>

6、列表渲染

1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p,index) in persons" :key="index">
      {{index+1}}--{{p.name}}--{{p.age}}--
      <button @click="deleteP(index)">删除</button>--
      <button @click="updataP(index,{name:'cat',age:30})">更新</button>--
    </li>

  </ul>


  <h2>测试: v-for 遍历对象</h2>


</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data:{
      persons:[
        {name:'Tom',age:20},
        {name:'Lucy',age:30},
        {name:'Flin',age:23},
        {name:'Yaxi',age:24}
      ]
    },
    methods:{
      deleteP(index){
        this.persons.splice(index,1)
      },
      updataP(index,newP){
        // 需要使用这种的变异的方法（1.执行原生的，更新界面）
        this.persons.splice(index,1,newP) // 这属于变异方法，可以参考vue的官网
        //vue本身只会监视persons的改变，而不会监视其内部结构的改变
        //this.persons[index] = newP 这样只会更改其内部的数据，并不会更新界面

      }
    }
  })
</script>
</body>
</html>
1. 列表过滤（trim）
2. 列表排序(计算排序)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1. 列表过滤
2. 列表排序
-->

<div id="demo">
  <input type="text" v-model="searchName">
  <ul>
    <li v-for="(p, index) in filterPersons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
    </li>
  </ul>
  <div>
    <button @click="setOrderType(2)">年龄升序</button>
    <button @click="setOrderType(1)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
  </div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      searchName: '',
      orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },

    computed: {
      filterPersons () {
//        debugger
        // 取出相关数据
        const {searchName, persons, orderType} = this
        let arr = [...persons]
        // 过滤数组
        if(searchName.trim()) {
          arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
        }
        // 排序
        if(orderType) {
          arr.sort(function (p1, p2) {
            if(orderType===1) { // 降序
              return p2.age-p1.age
            } else { // 升序
              return p1.age-p2.age
            }

          })
        }
        return arr
      }
    },

    methods: {
      setOrderType (orderType) {
        this.orderType = orderType
      }
    }
  })
</script>
</body>
</html>

7、事件处理

1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07_事件处理</title>
</head>
<body>
<!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

<div id="example">

  <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>

  <h2>2. 事件修饰符</h2>
  <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a><!--@click.prevent 阻止事件的冒泡    -->
  <div style="width: 200px;height: 200px;background: red" @click="test5">
    <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>  <!--@click.stop 表示停止事件的冒泡    -->
  </div>

  <h2>3. 按键修饰符</h2>
  <input type="text" @keyup.13="test7">
  <input type="text" @keyup.enter="test7">

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {

    },
    methods: {
      test1(event) {
        alert(event.target.innerHTML)
      },
      test2 (msg) {
        alert(msg)
      },
      test3 (msg, event) {
        alert(msg+'---'+event.target.textContent)
      },

      test4 () {
        alert('点击了链接')
      },

      test5 () {
        alert('out')
      },
      test6 () {
        alert('inner')
      },

      test7 (event) {
        console.log(event.keyCode)
        alert(event.target.value)
      }
    }
  })
</script>
</body>
</html>

8、表单的输入绑定

1. 使用v-model(双向数据绑定)自动收集数据（自动的收集数据）
  text/textarea
  checkbox
  radio
  select
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08_表单输入绑定</title>
</head>
<body>
<!--
1. 使用v-model(双向数据绑定)自动收集数据
  text/textarea
  checkbox
  radio
  select
-->
<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>

    <span>密码: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>

    <span>爱好: </span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
    <label for="pingpang">乒乓</label><br>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>


    <span>介绍: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>
</body>
</html>

9、Vue的生命周期

 可以先看看图，红色的框线内是我们的周期时段。一般我们使用mounted以及beforeDestory.

1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>09_Vue实例_生命周期</title>
</head>
<body>

<div id="test">
  <button @click="destroyVue">destory vue</button>
  <p v-if="isShow">尚硅谷IT教育</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#test',
    data: {
      isShow: true
    },

    //表示的是挂载，当初始化显示之后立即调用（生命周期的第二阶段）
    mounted () {
      // 执行异步任务
      //()=>当函数作为参数进行回调的时候，尽量使用这种的键值方式
      // this.intervalId = (() => {
      //   console.log('-----')
      //   this.isShow = !this.isShow
      // }, 1000)

      this.intervalId = setInterval(()=>{
        this.isShow = !this.isShow

      }, 1000)


    },

    beforeDestroy() {
      console.log('beforeDestroy()')
      // 执行收尾的工作(清除定时器的效果，若是不写这个方法，则定时器会一直执行（表示内存泄露）)
      clearInterval(this.intervalId)
    },

    methods: {
      destroyVue () {
        this.$destroy()
      }
    }
  })


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

10、过渡以及动画（因为我是做后端的，所有只有简单的了解）

1. vue动画的理解
  操作css的trasition或animation
  vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
  1). 在目标元素外包裹<transition name="xxx">
  2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
  xxx-enter-active: 指定显示的transition
  xxx-leave-active: 指定隐藏的transition
  xxx-enter: 指定隐藏时的样式
这里给出一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10_过渡&动画1</title>
  <style>
    /*指定过渡样式*/
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity 1s
    }
    /*指定隐藏时的样式*/
    .xxx-enter, .xxx-leave-to {
      opacity: 0;
    }


    .move-enter-active {
      transition: all 1s
    }

    .move-leave-active {
      transition: all 3s
    }

    .move-enter, .move-leave-to {
      opacity: 0;
      transform: translateX(20px)
    }
  </style>
</head>
<body>

<div id="demo">
  <button @click="show = !show">Toggle</button>
  <transition name="xxx">
    <p v-show="show">hello</p>
  </transition>
</div>

<hr>

<div id="demo2">
  <button @click="show = !show">Toggle2</button>
  <transition name="move">
    <p v-show="show">hello</p>
  </transition>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })

  new Vue({
    el: '#demo2',
    data: {
      show: true
    }
  })

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

11、过滤器

1. 理解过滤器（日期的格式化）
  功能: 对要显示的数据进行特定格式化后再显示
  注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
  1). 定义过滤器
    Vue.filter(filterName, function(value[,arg1,arg2,...]){
      // 进行一定的数据处理
      return newValue
    })
  2). 使用过滤器
    <div>{{myData | filterName}}</div>
    <div>{{myData | filterName(arg)}}</div>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11_过滤器</title>
</head>
<body>

<!--需求: 对当前时间进行指定格式显示-->
<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{date}}</p>
  <p>完整版本{{date | dateString}}</p>
  <p>完整版本{{date | dateString('YYYY-MM-DD')}}</p>
  <p>完整版本{{date | dateString('HH:mm:ss')}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
  Vue.filter('dateString',function(value,format){
    return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')

  })

  new Vue({
    el: '#test',
    data: {
      date: new Date()
    }

  })

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

12、常用的指令

常用内置指令
  v:text : 更新元素的 textContent
  v-html : 更新元素的 innerHTML
  v-if : 如果为true, 当前标签才会输出到页面
  v-else: 如果为false, 当前标签才会输出到页面
  v-show : 通过控制display样式来控制显示/隐藏
  v-for : 遍历数组/对象
  v-on : 绑定事件监听, 一般简写为@
  v-bind : 强制绑定解析表达式, 可以省略v-bind
  v-model : 双向数据绑定
  ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>12_指令_内置指令</title>
  <style>
    [v-cloak] { display: none }
  </style>
</head>
<body>

<div id="example">
  <p v-cloak>{{content}}</p>
  <p v-text="content"></p>   <!--p.textContent = content-->
  <p v-html="content"></p>  <!--p.innerHTML = content-->
  <p ref="msg">abcd</p>
  <button @click="hint">提示</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {
      content: '<a href="http://www.baidu.com">百度一下</a>'
    },
    methods: {
      hint () {
        alert(this.$refs.msg.innerHTML)
      }
    }
  })
</script>
</body>
</html>

13、插件（自定义插件）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>17_插件</title>
</head>
<body>

<div id="test">
  <p v-my-directive="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
  // 声明使用插件(安装插件: 调用插件的install())
  Vue.use(MyPlugin) // 内部会调用插件对象的install()

  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
  vm.$myMethod()

  new Object()
</script>
</body>
</html>

恋志传奇
关注
专栏目录
Vue快速入门指南
TinaCSDN的博客
11-20 636
0.学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 了解vue-router使用 1.前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端的一些技术，完成前端页面搭建。 先聊一下前端开发模式的发展。 静态页面 最初的网页以HTML为主，是纯静
Vue入门
Pwsifeng的博客
04-01 1922
第01天_Vue入门 学习路线图: HBuilderX工具的使得->了解Vue工作原理-> 模板语法->组件化->vue-cli完整项目开发 1. Vue介绍 ​ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提
vue生命周期转
浅夏博客
10-20 333
<!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>Doc
VUE基础
最新发布
专注于.NET和JS的开发和研究
09-19 761
入门基础
VUE(入门)
weixin_55376192的博客
05-14 630
Soc原则：关注点分离原则Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据网络通信 ： axios页面跳转 ： vue-router状态管理：vuexVue-UI : ICE , Element UIHTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。 JavaScrip
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
VUE入门学习项目资料与学习笔记.zip
02-12
这个名为“VUE入门学习项目资料与学习笔记.zip”的压缩包包含了一份详细的学习资源，帮助初学者深入理解Vue.js的核心概念和技术。以下是对这些资源的详细解读： 1. **Vue环境搭建**：Vue的安装通常有两种方式，一种...
Vue新手入门指南（易懂）
热门推荐
liuzhaoh的博客
03-01 1万+
Vue.js学习心得 前言 对于一名初入编程的新手来说，JavaScript的语法偏向复杂，选择Vue库可以说是一个较为不错的体验。在很多方面，Vue简化了JavaScrip语法，并且实现数据与视图的双向绑定，达到响应式页面的目的。 1. Vue实例和模板语法 <body> <div id="app"> <p>{{message}}</p> </div> <script> new Vue({ el:'#app'
vue入门学习资料pdf
07-31
如果你想学习Vue.js，以下是一些值得推荐的入门学习资料PDF。 1. Vue.js官方文档：Vue.js官方文档是学习Vue.js最重要的资料之一。它提供了详细的教程和示例，涵盖了Vue.js的所有重要概念和功能。官方文档以清晰简洁...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值