VUE学习笔记（1):vue基础

立即学习:https://edu.csdn.net/course/play/29544/421217?utm_source=blogtoedu

vue//默认情况下只对第一个有效，所以一般用id属性标记元素范围，修改的是{{内容 }}的内容

var v= new vue({

el: ""  , //el表示需要用vue来绑的元素范围

data: {

text1:"",(变量数据)

}, //data表示定义vue单个值基本数据。  （普通属性）

computed:{

compute1:function(){

return a;

}(变量数据)

},//计算属性，后面跟一个函数实现功能,必须要有返回值(变量数据)

methods:{//方法

click:function(){

}

},

})

1. 输出      可以在标签中用v-text=""  或v-html = "" 等价于{{}} 等价于innerText（innerHTML）。
2. 属性值绑定      v-bind:attribute;    用来绑定HTML自带属性：src、id、class、style等
3. 事件绑定    v-on:event;     用来绑定事件：click、dblclick
4. 在vue中this表示vue对象
5. 事件中获取页面中文本输入框的值可以用     event.target.value
6. 表单元素上的双向数据绑定  v-model   <input>等
7. 条件渲染  v-if         v-if结构、v-else-if结构、v-else结构、
8. 列表渲染 v-for    指令：   循环普通数组  item in items   循环普通数组带下标索引  (item,index) in items    循环对象属性，带下标索引键名    (value,key,index) in objects

Vue组件

1. 创建组件     Vue.component(id,[definition])     template:' ';
2. 通过Props向模板内传递数据  Props:["abcd"] 相当于给组件（自定义标签）添加自定义属性
3. 在组件中绑定事件$emit     可以定义组件模板内自定义事件
4. 模板内容slot    <slot></slot>用于在模板内将模板标签的内容添加到模板内的元素内容中
5. 动态组件：可以在需要的时候动态切换组件     （首先使用<component>组件，再再<component>上添加v-bind:is  属性动态绑定组件名。）
6. 在组件中使用v-model   正常工作需要在组件内的<input>中，将value特性绑定到一个名叫value的props上，在其input事件被触发时，将新的值通过自定义的input事件抛出
7. vue过渡   通过<transition>封装组件，可以添加进入/离开的过渡。   条件渲染（v-if）条件展示（v-show）动态组件，组件根节点。
8.