vue 插值表达式,v-cloak,v-text,v-html,以及v-bind,v-on

1,如何定义一个基本的vue代码结构
      1.1、 导入vue
      1.2、创建一个vue实例
2,插值表达式=> {{}} 和v-text(默认v-text是没有闪烁问题的 )
3,v-cloak          解决插值表达式闪烁的问题
4,v-html=“

demo

”           以html格式输出
5,v-bind           vue中提供的属性绑定机制            缩写为       :
6,v-on              vue中提供的事件绑定机制           缩写为      @


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>vue初识title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		style>
	head>
	<body>

		<div id="app">
			
			<p v-cloak>--{{ msg }}++p>		
			<p v-text="msg">======p>			
			
			
			
			<div> {{msg2}}	div>				
			<div v-text="msg2">div>			
			<div v-html="msg2">div>				
			
			
			
			
			<button type="button" v-bind:title="mytitle +'另外的内容'">按钮button>
			<button type="button"		:title="mytitle +'另外的内容'">按钮button>

			
			
			
			<button type="button" v-on:click="show">按钮button>
			<button type="button" @click="show">按钮button>
		div>
		<script type="text/javascript" src="vue.js">script>
		<script type="text/javascript">

			var vm=new Vue({
				el:'#app',
				data:{
					msg:'hello word',
					msg2:'

h1实验文本

' }, methods: {//定义了当前vue实例中所有可用的方法 show: function() { alert("demo") } } }) script> body> html>

你可能感兴趣的:(vue)