VUE.JS

vue.js---一个简单快捷的JS框架

vue.js拥有简单小巧的核心，渐进式技术栈，代码简单易学。

<script type="text/javascript" src='/images/loading.gif' data-original="js/vue.js" ></script> <!-- 导入vue.js -->

双向绑定--- 什么是双向绑定？　

      Vue框架 很核心的功能就是双向的数据绑定 ，双向是指 HTML标签数据绑定到Vue对象，另外反方向的数据也是绑定的。
      通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性变化。

Vue---构造函数

① 选项el属性，就是elment缩写，当前 Vue对象挂载到哪个标签上的语法，支持css选择器或者dom对象，一般用id选择器选择当      前的标签。
② data 属性是自定义数据，vue会把自定义的数据与html模版数据进行绑定。

③ 数据的绑定方式使用{{}},类似与Angularjs；

1.  vue.js 中使用{{}} 绑定表达式，用于将表达式的内容输出到页面中。
2. 表达式中可以是文字，运算符，变量等，也可以在表达式中进行运算输出结果。
3. 如果Vue.js文件放在页面的下方，会在页面刷新的瞬间看到{{}}表达式，所以可以使用v-cloak指令代替表达式。并且 在CSS中设置属性 [v-cloak]{display:none;}

   <div id="app" v-cloak v-html="message">
   <!--{{message}}-->
   </div>

  
 var app=new Vue({ //创建Vue对象  el:'#app', //把Vue对象挂载到div标签上，#app 是ID选择器；  data: {   message:'1 lalalalalalalalala', //message是自定义数据   }    }); var app2=new Vue({   el:'#app2',   data: {   message:'页面加载于'+new Date().toLocaleString(),   }    });

vue.js---指令(指令是扩展的 HTML属性，带有前缀v-)

• v-bind：动态绑定数据。是专门用来绑定属性的 ，主要用来操作元素的 class 列表和它的内联样式.简写为“:” 。=> 以后的:
• v-cloak ：隐藏未编译的Mustache语法，在css中设置[v-cloak]{display:none;}
• v-text ：更新数据，会覆盖已有结构。类似{{ msg }} ；
• v-once ：只渲染一次，随后数据更新也不重新渲染；
• v-html: 解析HTML标签
• v-show ：根据值的真假，切换元素的display属性；
• v-if ：根据值的真假，切换元素会被销毁、重建； => 在dom中已消失
• v-else-if ：多条件判断，为真则渲染；
• v-else ：条件都不符合时渲染；
• v-for ：基于源数据多次渲染元素或模块；
• v-model ：在表单控件元素（input等）上创建双向数据绑定（数据源）；跟Angular中
• ng-model用法一样。
• v-pre ：跳过元素和子元素的编译过程；
• v-on ：绑定时间**。简写为“@”，例：@click="xxx"；

vue.js---语句

v-if    v-show     v-else    v-else-if --条件语句

[v-if v-show v-else v-else-if]
v-if ：根据值的真假，切换元素会被销毁、重建； => 在dom中已消失
v-show ：根据值的真假，切换元素的display属性；
v-else ：条件都不符合时渲染；
v-else-if ：多条件判断，为真则渲染；v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

[v-if 与 v-show]
① v-show ：根据值的真假，切换元素的display属性；
v-show的元素会始终渲染保持在DOM中。
v-show不支持 template 标签。

② v-if 是真实的条件渲染，因为他会确保条件块在切换当中适当的销毁与重建条件块内的事件**和子组件

③v-if有更高的切换效果消耗，v-show有更高的初始渲染消耗。
如果需要频繁切换使用v-show 更好，如果在运行时，条件不大好使用v-if。

<p v-if="seen">v-if</p>

<p v-show="ok">v-show.</p>
<!--<p v-show="false">  hidden  </p>-->
<div v-if="Math.random()>0.5"> 123 </div>
<div v-else>321</div>

<script>
new Vue({
el: '#app',
data: {
seen: true,
ok:true,
}
})
</script>

循环语句

① 语法： v-for="site in sites"
      v-for 指令需要以 site in sites 形式的特殊语法，
      sites 是源数据数组并且 第一个参数site代指数组元素 ，可以传人第二个参数表示键名。
② v-for循环是不断创建新的标签，标签里的内容，我们决定，一般都是放在数组里，然后遍历显示出来。也可以放对象 ，遍历对象。
③ 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

vue.js---组件

Vue中的组件是一个自定义的标签(元素)，vue.js编译器会为他添加特殊功能。
Vue中的组件也可以拓展原生的html元素，封装可重用的代码。
 >>>组件的基本组成：
 样式结构 行为逻辑 数据三部分组成
>>>注意事项：

 起名：在js中使用驼峰法则，在html中就要使用横杠-。例如：myCom --> <my-com></my-com>
【全局组件】
 1、全局组件必须写在vue实例创建之前，才会在根元素下面生效
 2、模板里面第一级只能有一个标签，不能并行
 <h1>全局组件<p>123</p></h1> √
 <h1>全局组件</h1><p>123</p> ×
【局部组件】
 1、局部组件直接在vue实例中，使用components注册
 2、建议将模板定义在一个全局变量里。

 <div id="app">	<my-com message="hello"></my-com>	<vue></vue>	<input v-model="message2" />	<my-com v-bind:message="message2"></my-com> </div><script type="text/javascript" src='/images/loading.gif' data-original="js/vue.js" ></script>	<script type="text/javascript">Vue.component("myCom",{						//prop是父组件用来传递数据的一个自定义属性			props:["message"],			template:"<h1>{{message}}</h1>"		})				var child={			template:"<h1 style='font-size:25px;'>局部组件</h1>"		}		new Vue({			el:"#app",			data:{				message2:"在干什么"			},			//局部组件			components:{				"vue":child,			}		})</script>

vue.js---表单

<div id="app">			<!--用v-model指令在表单控件元素上创建双向数据绑定-->			<p>input元素</p>			<input v-model.lazy="message" />			<p>{{message}}</p>						<p>textarea元素</p>			<textarea v-model="massage1"></textarea>			<p>{{massage1}}</p>						<p>单选框</p>			<input type="checkbox" id="checkbox" v-model="checked" />			<label for="checkbox">{{checked}}</label>						<!--如果是复选框，结果将绑定到同一个数组-->			<p>复选框</p>			<input type="checkbox" name="baidu" id="baidu" value="baidu" v-model="checkName" />			<label for="checkbox">baidu</label>			<input type="checkbox" name="Tencent" id="Tencent" value="Tencent" v-model="checkName" />			<label for="checkbox">Tencent</label>			<input type="checkbox" name="sina" id="sina" value="sina" v-model="checkName" />			<label for="checkbox">sina</label>			<p>{{checkName}}</p>						<p>下拉列表</p>			<select name="select" v-model="selected">				<option value="www.XXX.com ">123</option>				<option value="www.XXX.com ">123</option>				<option value="www.XXX.com ">123</option>			</select>			<p>{{selected}}</p>					</div>	</body>	<script type="text/javascript" src='/images/loading.gif' data-original="js/vue.js" ></script>	<script type="text/javascript">		new Vue({			el:"#app",			data:{				message:"vue表单",				massage1:"hahha",				checked:false,				checkName:[],				selected:""			}		})		/*		 .lazy		在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步		 .number		如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值		 .trim		如果要自动过滤用户输入的首尾空格，		可以添加 trim 修饰符到 v-model 上过滤输入		*/	</script>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：VUE.JS

关键词：JS