Vue入门案例

Vue入门案例

1.1 新建空的工程文件

1.2 新建模块 Module

1.2.1 初始化文件

进入 hello-vue 目录，执行初始化命令 npm init -y。
执行完成后，会在 hello-vue 下生成一个 json 文件

1.2.2 安装 vue

安装 vue ：npm install vue --save
全局为-g；局部为-save

1.2.3 在hello-vue目录新建一个HTML

1. 在hello.html中，我们编写一段简单的代码：
h2中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。

1.2.4 vue声明式渲染【通过id选中要渲染的页面元素】

VUE入门操作命令手册：https://blog.youkuaiyun.com/Xxacker/article/details/104425184

然后我们通过Vue进行渲染：

<body>
    <div id="app">
        <h2>{{name}}，非常帅！！！</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥"
        }
    });

</script>

• 首先通过 new Vue()来创建Vue实例
• 然后构造函数接收一个对象，对象中有一些属性：
  • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
    • name：这里我们指定了一个name属性
• 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

1.2.5 双向绑定 【通过v-model与num】

我们对刚才的案例进行简单修改：

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>
            {{name}}，非常帅！！！有{{num}}位女神为他着迷。
        </h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "峰哥",
            num: 5
        }
    });

</script>

• 我们在data添加了新的属性：num
• 在页面中有一个input元素，通过v-model与num进行绑定。
• 同时通过{{num}}在页面输出

1.2.6 事件处理 【用v-on指令绑定点击事件】

我们在页面添加一个按钮：

<!-- 这里引号中也可以是方法名 -->
<button v-on:click="num++">点我</button>

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
• 普通click是无法直接操作num的。

1.3 生命周期钩子

生命周期

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