框架和库的区别？
jquery库->DOM(操作DOM)+请求
art-template库->模板引擎
框架 = 全方位功能齐全
简易的DOM体验 + 发请求 + 模板引擎 + 路由功能
代码的不同
一般使用库的代码，是调用某个函数，我们自己把控库的代码
一般使用框架，其框架在帮我们运行我们编写好的代码
Vue起步
1.引包
2.启动new Vue({el:目的地,template:模板内容 });
options
目的地 el(string||DOM元素)
内容 template
数据 data是一个函数,return一个对象，可以直接在页面中使用…..在js中this.key名 data中的属性 在dom中直接用，在js中 this.xxx
data的写法：
var app = new Vue({ el:"#app", /*data:{ message:"hello vue!" }*/ /*data() { return { message:'test 1' } }*/ /*data:function() { return { message:'test 1' } }*/ });
components:key只组件名，value是组件对象
methods:一般用来配合 xxx事件
props:子组件接受的参数设置[‘title’]
vue的文件介绍
插值表达式
{{表达式}}
对象(不要连续3个{{{name:'jack'}}} )
字符串
判断后的布尔值
三元表达式
可以用于页面中简单粗暴的调试
注意:必须在data这个函数中返回的对象中声明
什么是指令
比如在angular 中以mg-xxx开头的就叫做指令
在vue中以v-xxx开头的就叫做指令
指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，框架会进行相关DOM操作的绑定
vue中常用的v-指令演示
v-text 元素的InnerText属性，必须是双标签
只能用在双标签中，其实就是给元素的innerText赋值
v-html 元素的innerHTML，其实就是给元素的innerHTML赋值
v-if 判断是否插入这个元素。
如果值为false会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素。
如果有if和else 就不需要单独留坑了
如果全用上 v-if 相邻 v-else-if 相邻v-else 否则v-else-if可以不用
v-if和v-else-if都有等于对应的值，而v-else直接写
v-if家族都是对元素进行插入和移除的操作
v-show
v-else-if
v-else
v-show 隐藏元素，如果确定要隐藏。会给元素的style加上display:none
是显示与否的问题
注意：指令其实就是利用属性作为标识符，简化DOM操作
看：v-model="xxx"
v-model 代表要做什么 xxx代表针对的js内存对象
写在哪个元素上，就对哪个元素操作
v-bind使用
给元素的属性赋值 <div file="{{变量}}"></div>
可以给已经存在的属性赋值 input value
也可以给自定义的属性赋值 mydata
语法：在元素上v-bind:属性名="常量||变量名"
简写形式:属性名="变量名"
<div v-bind:原属性名="变量"></div>
<div :属性名="变量"></div>
v-ond的使用
处理自定义原生时间的，给按钮添加click并让使用变量的样式改变
在元素上 v-on:原生时间名="给变量进行操作||函数名"
简写形式:@原生事件名="给变量进行操作"
v-model
双向数据流(绑定)
页面改变影响内存(js)
内存(js)改变影响页面
v-bind 和v-model的区别？
input v-model="name"
双向数据绑定 页面对于input的value改变，能影响内存中name的变量
内存js改变name的值，会影响页面重新渲染最新值
input :value="name"
单向数据绑定 内存改变影响页面改变
v-mdodel:其的改变影响其他 v-bind:其的改变不影响其他
v-bind 就是对属性的简单赋值，当内存中值改变，还是会处方重新渲染
v-for的使用
基本语法：v-for="item in arr"
对象的操作 v-for="item in obj"
如果是数组没有id
v-for="(item,index) in arr" :class="index"
各种v-for的属性顺序
数组 item,index
对象 value,key,index
父子组件传值(父传子)
1.父用子的时候通过属性传递
2.子要声明props:['属性名']来接受
3.收到就是自己的了，随便你用
在template中直接用
在js中 this.属性名 用
总结：父传子，子声明，就是子的了
小补充：常量传递直接用，变量传递加冒号
总结父传子
父用子 先有子，声明子，使用子
父传子 父传子(属性)，子声明(收)，子直接用(就是自己的一样)
<script src="Vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
var Son = {
template:`<div>
接收到父组件的数据是：{{title}}
<h1 v-if="xxx">1</h1>
<h1 v-show="xxx">2</h1>
<ul>
<li v-for="stu in ['张三','李四']">
{{stu}}
</li>
</ul>
<button @click="changeXxx">改变显示</button>
<hr/>
单向数据流(vue-> html):<input type="text" :value="text"><br/>
双向数据流:
<input type="text" v-model="text"><br/>
<h1>主要看这里:箭头↓↓↓↓↓↓↓</h1>
{{text}}
</div>`,
data:function(){
return {
xxx:true,
text:'hello'
}
},
methods:{
changeXxx:function(){
this.xxx = !this.xxx;
}
},
//声明接受参数
props:['title']
}
//其实父向子传递，就是v-bind给元素的属性赋值
var App = {
components:{
son:Son
},
template:`<div>
<son :title="xxx"></son>
<!-- <son title="hello"></son> 传递常量 -->
</div>`,
data:function(){
return { xxx:'我是xxx数据'}
}
};
new Vue({
//data就不在这个组件对象中写了（启动组件）
el:'#app',
//声明子组件
components:{
app:App
},
template:'<app/>'
});
</script>
1:生出子，声明子，使用子
<script src="Vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
//1:生出子，声明子，使用子
//头组件
var MyHeader = {
template:`<div>我是头部</div>`
}
//函数调用的方式创建组件
var MyBody = Vue.extend({
template:'<div>我是函数调用方式的中部</div>'
});
//语法糖
/*var MyBody = {
template:`<div>我是中部</div>`
}*/
var MyFooter = {
template:`<div>
我是底部 <button @click="showNum(123)">点我</button>
</div>`,
methods:{
showNum:function(num){
alert(num);
}
}
}
//声明入口组件
var APP = {
components:{
'my-header':MyHeader,
'my-body':MyBody,
'my-footer':MyFooter,
},
template:`
<div>
<my-header></my-header>
<my-body/>
<my-footer></my-footer>
</div>
`
};
new Vue({
el: '#app',
components:{ //声明要用的组件们
//key 是组件名,value是组件对象
app:APP
},
template:'<app/>',//入口组件
});
</script>