Vue入门级语法
使用方式
新手学习，只需要以引入<script>的方式即可。
在.html 中的head中加上<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>即可
学编程怎么能少了hello world
<html> |
如果是本地测试，最好把vue.js下载到本地，下载地址：https://vuejs.org/js/vue.js
声明式渲染
- Vue 是一种
MVVM 模式，当vue 和一个挂载点绑定之后就可以操作这个挂载点之下的DOM元素 - 挂载点，通俗的讲就是一个DOM元素，比如上面的代码,vue的
el是#app对应的<div id="app"> { { message } } </div>这个div就相当于一个挂载点 - data中可以自定义任意变量，
{ { } }这就是vue的显示语法， { {message } }这个的意思是，显示为vue中的message字段对应的数据为：hello vue- 其实除了
<div id="app">{ { message } }</div>这个之外，还可以用<div id="app" v-html="message"></div>或者<div id="app" v-text="message"></div> - 也就是说除了
{ {} }语法 还可以用v-text="变量"或者v-html="变量"这种语法的。
条件判断
语法：v-if,如果v-if=true就显示，否则不显示
<body> |
如上，西红柿就不会显示，和v-if有点像的有v-show 用法和v-if一样，区别在于
v-if会把dom元素删除掉v-show不会把dom元素删除，而是通过style标签隐藏掉
数据绑定
<body> |
v-bind绑定的是DOM元素的属性，当鼠标移到 那行字的时候，title被触发显示我们自定义的数据
当然v-bind不只是可以绑定title属性，
v-bind:valuev-bind:classv-bind:style- 等等。。。
缩写语法：:title ,也就是去掉v-bind,直接:加html属性,例如上面的可以写成<div id="app2" :title="message" >你还要我怎样 要怎样，你突然来的短信就够我悲伤</div>
列表循环
<body> |
- 用
v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。 - 后面第二种的写法也可
<li v-for="(item,index) of obj">{ { item.age } }</li>就是加了一个index 索引字段
组件基础
自定义一个组件示例：
Vue.component("fruit-item",{ |
- 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是
<fruit-item>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用 - Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。如上就是
item属性就是，我们就可以通过item自定义我们的数据 - prop是一个数组类型，我们可以从外面传多个数据进来
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="../dist/vue.min.js"></script>
<style>
#app{
width: 500px;
height: 500px;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="app">
<ol>
<fruit-item v-for="fruit in fruits" v-bind:item="fruit"></fruit-item>
</ol>
</div>
<script>
Vue.component("fruit-item",{
props:["item"],
methods: {
alertName: function (name) {
alert(name);
}
}
});
var app = new Vue({
el:"#app",
data:{
fruits:[{cn_name:"苹果",en_name:"apple"},
{cn_name:"梨",en_name:"pear"},
{cn_name:"杏",en_name:"apricot"},
{cn_name:"桃",en_name:"peach"},
{cn_name:"葡萄",en_name:"grape"}
]
}
})
app.fruits.push({cn_name:"西红柿",en_name:"Tomato"});
</script>
</body>
</html>
每一个组件就是一个Vue实例，所以在组件中我们也可以在methods定义方法时间，也可以定义data中定义变量。
那我们是不是可以说，每个Vue示例就是一个组件呢？是
表单绑定
|
- 你可以用
v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
事件处理
<body> |
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。上述代码按钮绑定的事件方法名为：reverseMessage
- 语法：
v-on:click="方法名" - 缩写语法：
@click,代码如下<div id="app">
<button @click="eventClick">可以获得DOM原生的事件</button>
<button @click="say('hi')">Say hi</button>
<button @click="say2('what',$event)">Say what</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
name: "vue.js",
count:0
},
methods:{
eventClick:function(event){
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName);
},
say: function (message) {
alert(message)
},
say2: function (message,event) {
alert(event.target.innerText);
console.log("event",event);
}
}
});
</script>
</body>
样式渲染
|
- 我们可以传给
v-bind:class一个对象，以动态地切换 class：<li v-bind:class="classObject" >橘子</li>在classObject有两个属性，哪个为真就取其样式 v-bind:class指令也可以与普通的 class 属性共存。当有如下模板:<li class="error" v-bind:class="classObject">西红柿</li>
结果渲染为<li class="error active">西红柿</li>- 还有组件样式： 如下示例
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue.component</title>
<script src="../dist/vue.min.js"></script>
<style>
#app{
width: 500px;
height: 500px;
margin: 100px auto;
}
.default{
background: aliceblue;
}
.active{
color: green;
}
.error{
color: red;
}
</style>
</head>
<body>
<div id="app">
<ol>
<li class="default">苹果</li>
<li class="default" v-bind:style="mystyle">橘子</li>
<li class="default">香蕉</li>
<fruit-item class="default" ></fruit-item>
</ol>
</div>
<script>
Vue.component("fruit-item",{
});
var app = new Vue({
el:"#app",
data:{
mystyle:{
color:"#FF8809",
background: 'aliceblue'
}
}
})
</script>
</body>
</html>
组件中可以包含class
计算与监听
|
- 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的,在模板中放入太多的逻辑会让模板过重且难以维护,所以有了计算属性
- 如上的
全名需要通过姓和名 计算而来，计算属性就放在computed中。watch是一个监听器，比如当fullName发生改变的时候，count++`
组件之间的数据传递
|
- 如上demo，我们可以自己加数据，当点击
<li>的时候,就需要改变组件外的Vue示例的list在liClick方法中我们把参数传递了出去
HTTP 请求
|
自此基础语法大成！！！
本篇完整代码地址：
