vue入门教程(1)

Vue教程

  • 前言
    • 在IDEA中安装vue
    • 在Chrome中加入扩展程序vue-devtools
      • 下载vue-devtools
      • 在Chrome中添加扩展程序
  • Vue入门案例
      • 1.HTML模板中写入内容
      • 2.vue渲染
      • 3.双向绑定
      • 4.事件处理
      • 5.生命周期钩子
        • 5.1钩子函数
        • 5.1this

前言

我们在学会使用Vue之前,我们得学会如何在IDEA中安装vue,并且在Chrome中加入扩展程序vue-devtools

在IDEA中安装vue

这个请访问博主博客vue的安装。

在Chrome中加入扩展程序vue-devtools

下载vue-devtools

vue-devtools下载地址:https://pan.baidu.com/s/113sGjOcz2AlhW9fAh57I9g

提取码:4q8q

在Chrome中添加扩展程序

我们可以直接输入chrome://extensions/来访问

打开以后我们直接将解压的文件拉倒这个页面即可,你没有看错,就是直接拉,谷歌会自动安装
vue入门教程(1)_第1张图片
但我们打开我们自己写的html时,点开检查就会出现vue
在这里插入图片描述

Vue入门案例

1.HTML模板中写入内容

<div id="app">
    <h1>周杰伦<h1>
div>

vue入门教程(1)_第2张图片

2.vue渲染

  • 首先通过new Vue()来创建Vue实例

  • 然后构造函数接受一个对象,对象中含有属性:

     el:是element的缩写,通过id选中要渲染的页面元素
     data:数据,是一个对象,里面有很多属性,都可以渲染到视图中
    
  • 页面中的h1元素中,我们通过{ {name}}的方式来渲染定义的那么属性

<div id="app">
    <h2>{
    {name}} 非常帅h2>
div>
<script src="/node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
      
        el:"#app", // el,即element。要渲染的的页面元素
        data:{
       // 数据
            name:"周杰伦"
        }
    })
script>

vue入门教程(1)_第3张图片
我们可以在vue中进行修改属性
vue入门教程(1)_第4张图片

3.双向绑定

我们对刚才的实例进行修改

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h1>{
    {name}}唱歌很好听,{
    {num}}名粉丝为其着迷h1>
    div>
<script src="node_modules/vue/dist/vue.js">script>
<script type="text/javascript">script>
<script>
    //生成一个Vue实例
    var vue = new Vue(
        {
      
            el:"#app",//el,即element。要渲染的页面元素
            data:{
      //数据
                name:"周杰伦",
                num:1,
            }

        }
    )
script>
body>
  • 我们在data中添加新的属性:num
  • 在页面中有一个input元素,通过v-modelnum进行绑定
  • 通过{ {num}}在页面输出

vue入门教程(1)_第5张图片

vue入门教程(1)_第6张图片

4.事件处理

我们在页面中添加一个button按钮,每次点击num加1

 <button @click="num++">点我button>

vue入门教程(1)_第7张图片

5.生命周期钩子

每个Vue实例在被创建的时候都要经历一系列初始化过程:创建实例,装载模板,渲染模板等等。Vue为为生命周期中的每个状态都设置了一个钩子函数(监听函数)。每个Vue实例处于不同的生命周期时,对应的函数就会被触发和调用。

生命周期:
vue入门教程(1)_第8张图片

5.1钩子函数

例如:created代表vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的构造函数

<script>
    //生成一个Vue实例
    var vue = new Vue(
        {
      
            el:"#app",//el,即element。要渲染的页面元素
            data:{
      //数据
                name:"周杰伦",
                num:1,
            },
            //钩子函数
            created(){
      
                this.name = "我刚刚说周杰伦";
            }

        }
    )
script>

vue入门教程(1)_第9张图片

5.1this

我们可以看下在vue内部this变量是谁,我们在created的时候打印this

            created(){
                this.name = "我刚刚说周杰伦";
                console.log(this);
            }

控制台输出:

我们可以看到这个this对象的输出
vue入门教程(1)_第10张图片

后续继续更新,感谢支持!

你可能感兴趣的:(vue,java,vue,java,javascript,js)