VUE Primary Trial 1

Environment setup

Node and NPM

NPM is a module management tool provided by Node. It is very convenient to download and install many front-end frameworks, including Jquery, AngularJS, and VueJs. For the convenience of later learning, we first install node and NPM tools.

Download Node.js

Download address: https://nodejs.org/en/
完成以后,在控制台输入: node -v
Insert picture description here

NPM

Node comes with NPM, enter it in the console to npm -vview
Insert picture description here
npm install nrm -g

Insert picture description hereThen use the nrm lscommand to view the list of npm repositories, the one with * is the currently selected mirror repository:
Insert picture description here
pass nrm use taobaoto specify the mirror source to be used:
Insert picture description herethen pass nrm test npmto test the speed:
Insert picture description here

Install VUE

Install Vue, enter the command: npm install vue --save
Insert picture description here
single binding code display

<!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 two-way binding

<!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 create instance


Pass in an object in the constructor, and declare various data and methods required by Vue in the object, including: 1.el; specify template elements such as
var vueLe = new Vue(le:"#app") <div id="app"></div>
2.data; for view rendering data. E.g:

   <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>

Guess you like

Origin blog.csdn.net/weixin_42789301/article/details/105201189