VUE初级试炼1

环境搭建

Node和NPM

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

下载Node.js

下载地址：https://nodejs.org/en/
完成以后，在控制台输入： node -v
在这里插入图片描述

NPM

Node自带了NPM了，在控制台输入npm -v查看
在这里插入图片描述
npm install nrm -g

在这里插入图片描述然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

通过nrm use taobao来指定要使用的镜像源：
然后通过nrm test npm来测试速度：

安装VUE

安装Vue，输入命令：npm install vue --save
在这里插入图片描述
单项绑定代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>简单学习一门前端语言，这门语言叫做{
   
   {name}}</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<!--<script src="node_modules/vue/dist/vue.js"/>这样写VUE无法渲染-->
<script>
    const demo = new Vue({
     
     
        el: "#app",
        data: {
     
     
            name: "VUE"
        }
    });
</script>
</html>

v-model双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="num"/>
    <h2>简单学习一门前端语言，这门语言叫做{
   
   {name}}</h2>
    <h3>我需要学习更多的语言，与时俱进</h3>
    <h4>{
   
   {num}}加油</h4>
    <button v-on:click="num++" >点我</button>

</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const demo = new Vue({
     
     
        el: "#app",
        data: {
     
     
            name: "VUE",
            num:1
        }
    });
</script>
</html>

Vue 创建实例

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：
1.el；指定模板元素例如
var vueLe = new Vue(le:"#app") <div id="app"></div>
2.data;用于视图渲染数据。例如：

   <script src="node_modules/vue/dist/vue.js"></script><script>
   const demo = new Vue({
     
     
       el: "#app",
       data: {
     
     
           name: "VUE",
           num:1
       }
   });
</script>   
<div id="app">{
   
   {name}}</div>

			  3.methods:方法；

<script src="node_modules/vue/dist/vue.js"></script><script>
<script>
var vm = new Vue({
     
     
    el:"#app",
    data:{
     
     
        num: 0
    },
    methods:{
     
     
        add:function(){
     
     
            // this代表的当前vue实例
            this.num++;
        }
    }
})
</script>
<div id="app">
    {
   
   {num}}
    <button v-on:click="add">加</button>
</div>