Vue前端框架

Vue前端框架

Vue模板语法

1.导入vue（使用script标签）

2.使用

var vm =new Vue({
				el:"#app",
				data:{
					url:"http://www.baedu.com",
					arr:[1,2,3],
					msg:"欢迎来到vue简介"
				},
				methods:{
					funce:function(){
						return this.url;
					}
				}
			})

注意：

1. 每一个vue应用都需要通过实例化vue来实现

2. 在vue构造器中的参数：

   1. el：DOM元素中的id（表示唯一），element
   2. data：数据属性
   3. methods：用于定义函数
   4. data的数据渲染到前端页面（标签中）
   5. 采用{{}方式}

3. el：“#app”,需要绑定一个元素（id属性），只用绑定了的才能显示和使用

3.文本输出

new Vue({
				el:"#app",
				data:{
					msg:"<h1>你好</h1>"
				}
			})

这里的data使用{{msg}}输出=js中innerText输出

使用以下方式则为js中的innerHtml输出：可以解析html标签

<div v-html="msg"></div>

4.属性修改

1. 操作样式 v-bind

2. v-model 绑定value值

3. 多个class

<div v-bind:class="{ 'class1 ' :updateclass, 'class2':updateclass}">{{msg}}</div>

4. 表达式

{{message.split('').reverse().join('')}}
//反转字符串

5. v-if v-else v-else-if

   <p v-if="ok">798</p>
   <p v-else>123</p>
   <p v-else-if="">23</p>
   

   5.参数

   1. v-bind:class --class参数：：缩写:class
   2. v-on 指令 监听事件(鼠标，键盘，input事件):缩写@click

<div id="on">
		<input type="button" v-on:click="onc" value="点击" />
	</div>

js

new Vue({
				el:"#on",
				data:{
					msg:"<h1>你好</h1>"
				},
				methods:{
					onc:function(){
						console.log("点击");
						alert("点击");
					}
				}
			});

6.过滤器

| 管道符

在花括号，v-bind:href=“url|”

7.循环v-for

和js中for–in类似：for(var a in list) list数组-类数组

在table标签下面：div和template不会渲染