VUE学习历程之第一天

一.编写的第一个vue应用。

1.通过在head标签引入vue.js来学习。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.需要特殊的表达式来展示变量值例如：{{message}} 这里的变量message就可以在后面的vue特有的代码里面来赋值。

3.赋值需要在{{message}}之后才生效，我试过这两种

3.1 有效

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div class="app">
            {{ message }}
        </div>
            <script>
        var app = new Vue({ 
        el: '.app',
        data: {
	message: 'Hello Vue'
    }
	});
        </script>
    </body>
</html>
</html>

3.2无效

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
        var app = new Vue({ 
        el: '.app',
        data: {
	message: 'Hello Vue'
	}
	});
        </script>
    </head>
    <body>
        <div class="app">
            {{ message }}
        </div>
    </body>
</html>
</html>

4.发现如果div里面是id="app"的话，下面就用el:'#app',如果是class="app"的话，下面就用el:'.app'.

5.如果只需要展示一个固定变量的值 则不需要Vue实例，如果需要动态响应式的修改变量值则需要申明实例

及 Vue app = new Vue{...}

其中的app名字自己取，和div里面的id名没关系，值得注意的是div里面的id或者class需要和Vue类里面的el对应。

*打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

6.上面属于简单的文本插值，下面我接触到一个叫绑定元素特性。

代码可以这样写：

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div class="app">
             <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
        </div>
            <script>
        var app = new Vue({ 
        el: '.app',
        data: {
	message: '页面加载于 ' + new Date().toLocaleString()
    }
	});
        </script>
    </body>
</html>
</html>

*其中的title是span标签里面的属性。绑定属性后可以动态的修改他的属性值。

小写：var ;首字母大写：Vue .

7.Vue里面的if和for

由于我有编程基础就不贴全部代码：

if:

<p v-if="seen">现在你看到我了</p> 然后通过Vue对象修改属性seen的布尔值.

for:在这贴一下代码，便于自己回顾：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

建议：文本结合浏览器和控制台工具将代码敲几遍。
总结：不管属性值是单个字符串还是对象亦或是数组，后面统一加":",后面的字符串可以是双引号和单引号。属性值统一放data对象里面。方法则放在methods对象里面。方法后面还需要加上function().

在控制台敲代码的时候会发现有许多有意思的函数，用法很像java，例如：push、pop.

8.关于Vue里面的点击处理。

我贴上自己跟着文档敲的代码方便温习。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
		<p>{{ message }}</p>
		<button v-on:click="reverseMessage">逆转消息</button>
        </div>
            <script>
        var jason =new Vue({ 
        el: '#app',
        data: {
		message:"我是没点击之前"
    },
	methods:{
	reverseMessage:function(){
			this.message=this.message.split('').reverse().join('')
		}
	}
	})
        </script>
    </body>
</html>
</html>

官方有这个一句话：注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

9.Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

贴上代码：

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
		<p>{{ message }}</p>
		<input v-model="message">
        </div>
            <script>
        var jason =new Vue({ 
        el: '#app',
        data: {
		message:"我是没点击之前"
    }
	})
        </script>
    </body>
</html>
</html>不管是修改输入框里面的值还是动态在控制台上修改message的值,所有用到message的地方都将改变。

 

二.组件化应用构建

我先摘抄一下官方的话：

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。下面是图片。

1.组件写和用：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

我先贴一下代码，新手会在这里掉坑。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
		<p>{{ message }}</p>
		<input v-model="message">
		<todo></todo>
        </div>
            <script>
		Vue.component('todo', {
		    template: '<p>这是个待办项</p>'
			});
	        var jason =new Vue({ 
                    el: '#app',
                    data: {
		    message:"我是没点击之前"
                    }
	    });
        </script>
    </body>
</html>

注意事项1.如果是一个组件套一个组件，里面的组件先在script里面声明,我建议用";"隔开。

2.关于父组件向子组建传值的代码。

<html>
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
    <todo-item v-for="item in list" v-bind:todo='item'>
    </todo-item>
  </div>
  <script>
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<p>{{todo.text}}</p>'
    });
    var jason = new Vue({
      el: '#app',
      data: {
        list: [
          { text: '1111111' },
          { text: '2222222' },
          { text: '3333333' }
        ]
      }
    });
  </script>
</body>
</html>

我自己的理解：初始化：子->父   传值：父->子 

自己才能看得懂的密文：jason - list - item - [todo] - todo.text(item.text)