资源引入
vue
<script src="https://s3.cn-north-1.amazonaws.com.cn/h5.taocai.mobi/saas-Dev/js/vue.js"></script>
element-ui
//css
<link rel="stylesheet" href="/resources/common/goods/css/elementUi.css">
//js
<script src="https://s3.cn-north-1.amazonaws.com.cn/h5.taocai.mobi/saas-Dev/js/elementUi.js"></script>
Axios
<script src="https://s3.cn-north-1.amazonaws.com.cn/h5.taocai.mobi/saas-Dev/js/axios.min.js"></script>
起步
//html
<div id="app">
{{ message }}
</div>
//js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Hello: {{ msg }}</span>
指令
v-if
v-if v-elif v-else-if 三个指令搭配使用
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-for
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
<!--其余写法-->
<div v-for="(item, index) in items" :key="item.id">
{{index}}-{{item.text}}
</div>
<div v-for="(val, key) in object" :key="val">
{{key}}-{{val}}
</div>
<div v-for="(val, name, index) in object" :key="val">
{{index}}-{{name}}-{{val}}
</div>
v-on
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 传值 -->
<button v-on:click="doThat('hello', $event)"></button>
v-bind
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
v-model
在表单控件或者组件上创建双向绑定。
<!-- 输入框 -->
<input v-model="message" placeholder="edit me">
<!-- 文本框 -->
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<!-- 多选框 -->
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<!-- 单选 -->
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<!-- 选择框 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<!-- 配合v-for -->
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
选项/数据
data
var app = new Vue({
el: '#app',
data: function () {
return {
msg:'hello'
}
},
methods:{
edit(){
//修改msg
this.msg = 'tcm';
}
}
})
//外部修改data
app.msg="特朗普";
methods
<div id="app">
<div>{{a}}</div>
<button @click="plus">点我</button>
</div>
var app = new Vue({
el: '#app',
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
computed 计算属性
<div id="app">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
watch 侦听属性
var vm = new Vue({
data: {
a: 1,
},
watch: {
a: function (newVal, oldVal) {
console.log('new: %s, old: %s', newVal, oldVal)
},
}
filter 过滤器
<!-- 调用方式 -->
//1、在html中调用
<p>{{num|addZero}}</p>
//2、在函数中调用
methods: {
add(){
let newnum = this.$options.filters.addZero(this.num);
}
},
filters:{
addZero(value) {
return value > 10 ? value : '0' + value;
});
}
生命周期
// 最常用的是created()和mounted()
var app = new Vue({
el: '#app',
beforeCreate(){}, //组件实例刚刚创建，还未进行数据观测和事件配置
created(){}, //实例已经创建完成，并且已经进行数据观测和事件配置
beforeMount(){}, //模板编译之前，还没挂载
mounted(){}, //模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
beforeUpdate(){}, //组件更新之前
updated(){}, //组件更新之后
beforeDestroy(){}, //组件销毁之前
destroyed(){} //组件销毁之后
})
Axios
methods: {
doit(){
axios.post(url, params)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error)
})
}
}
