Vue2.0基础

给项目安装Vue

终端下
1.项目初始化,出现json文件

npm init -y

2.安装Vue，在node_modules下有Vue文件

npm install vue

3.引入Vue

<script src="./node_modules/vue/dist/vue.js"></script>

声明式渲染

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

这里使用差值表达式{{}}直接从数据库取出数据动态显示

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

el:元素，直接用"#id"绑定上面的id

F12在控制台里输入 vm.name="李四"可以实现直接更改

双向绑定

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

利用 v-model实现双向绑定

data: {  //封装数据
                name: "张三",
                num: 1
            }

元素 模型 某一个数据绑定 输入框变了元素也会变，反之也成立
双向绑定,模型变化，视图变化。反之亦然

<button v-on:click="num++">点赞</button>
<button v-on:click="cancle">取消</button>
<h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>

methods:{  //封装方法
                cancle(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }

总结

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