一.编写的第一个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)