Vue学习笔记(简易)

文章放置于：https://github.com/zgkaii/CS-Notes-Kz，欢迎批评指正！
安装vue

# 最新稳定版
$ npm init -y #初始化
$ npm install vue

1、vue声明式渲染

<div id="app">
  {
  { name}},非常帅
</div>

let vm = new Vue({
   
            el: "#app",//绑定元素
            data: {
     //封装数据
                name: "张三",
            },
        });

2、v-model双向绑定

当元素中模型与某数据绑定后。随着模型变化，视图变化；反之亦然。

<input type="text" v-model="num">
<h1> {
  {name}} ,非常帅，有{
  {num}}个人为他点赞</h1>

let vm = new Vue({
   
            el: "#app",//绑定元素
            data: {
     //封装数据
                name: "张三",
                num: 1
            },
        });

直接在控制台修改vm对象的值，视图随之改变。

3、事件处理

*v-on**是按钮的单击事件：

<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消</button>

let vm = new Vue({
   
            el: "#app",//绑定元素
            data: {
     //封装数据
                name: "张三",
                num: 1
            },
            methods:{
     //封装方法
                cancle(){
   
                    this.num -- ;
                },
                hello(){
   
                    return "1"
                }
            }
        });

Vue使用小结：
1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板(响应式的);
2、通过（v-xxx）指令来简化对dom的一些操作。
3、声明方法来做更复杂的操作。methods里面可以封装方法。

在Vue中el，data和methods的作用:

• el：绑定数据；
• data：封装数据；
• methods：封装方法，并且能够封装多个方法，如何上面封装了cancell和hello方法。-

VS Code安装“Vue 2 Snippets”，用来做代码提示。
为了方便的在浏览器上调试VUE程序，需要安装“vue-devtools”，编译后安装到chrome中即可。
详细的使用方法见：Vue调试神器vue-devtools安装

4、指令

Vue指令学习笔记

5、计算属性与侦听器

1）计算属性

    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性来完成 -->
        <ul>
            <li>西游记； 价格：{
  {xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
            <li>水浒传； 价格：{
  {shzPrice}}，数量：<input type="number" v-model="shzNum"> </li