工程简介
vue学习笔记
1.what:
基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、 组件化的编程模型，帮助你高效地开发用户界面。
2.why
为什么要选择vue呢? vue作为前段框架，具有优秀的解耦合能力，为什么这么说呢 因
为vue类似于由组件组合而成的框架，为什么这么说呢？因为vue中可以自定义 组件，比如你设置一个组件，以前你需要用
js或者jQuery去获取id然后再用一些 听都没听过的方法，各种设置，代码只有自己能看懂，而vue采用组件，一个
页面可以 有若干组件，每个组件你都可以独立设置，不会影响其他位置，说道对组件进行设置 vue具有优秀的数据绑定能力，也
就是对dom的操作简化了很多，为你开发节约时间， 也为你今后维护用不着看很多你没见过的方法
3.when
什么时候使用vue，这个不用说
4.where
这个也不用说
5.who
这个也不用说
-----------------------------
vue入门
1.引入依赖
<script src="./vue/vue.js"></script>
2.添加div
<div id="app">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
vue中使用{{msg}}这样的双引号的形式设置内容
3.js
var app = new Vue({
el:"#app",//参数
data:{//为变量赋值
site:"菜鸟教程"
},
methods:{//配置函数方法
details:function(){
return this.site+" -vue学习总结"
}
}
})
----------------
常见模板语法
1）插值：{{...}}
2）Html：v-html=""，在data中进行设置
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>菜鸟教程</h1>'
}
})
</script>
3）属性：v-bind 用于绑定数据和元素属性的
<!-- 完整语法 -->
<a v-bind:href="url"></a>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
class:"btn btn-default"
}
});
<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
4）指令 v-if
可以判断是否显示组件
5)参数 v-bind
v-bind:href="url",在参数之后家:
6)双向绑定 v-model，一般多用于双向绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
7）监听时间 v-on
<!-- 缩写 -->
<a :href="url"></a>
v-on:click=""
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
8）循环语句 v-for
v-for="site in sites"
这里的循环可以对数组，json等若干类型数据进行遍历操作
<div id="app">
<ol>
<li v-for="site in sites">//通过这样的方式进行循环
{{ site.name }}
</li>
</ol>
</div>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob' },
{ name: 'Google' },
{ name: 'Taobao' }
]
}
})
</script>
-----------------------------------------
！注：computed vs methods
computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
/////////////////////////////////////////////////////////
vue组件
vue具有自定义组件的功能，这也是vue为何如此大受欢迎的原因
1）注册一个全局组件语法格式如下：
Vue.component(tagName, options)
2）tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
<template>
自定义组件设置
</template>
<script>
js数据设置
</script>
<style>
样式设置
</style>
------------------------------
Vue.js Ajax(axios)
用于数据交互类似于ajax
get请求实例
<div id="app">
<h1>网站列表</h1>
<div
v-for="site in info"
>
{{ site.name }}
</div>
</div>
<script type = "text/javascript">
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://www.runoob.com/try/ajax/json_demo.json')
.then(response => (this.info = response.data.sites))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
</script>
post请求实例
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.post('https://www.runoob.com/try/ajax/demo_axios_post.php')
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
-----------------
vue学习注意事项
待定~
