Vue.js 是什么
官网:http://doc.vue-js.com/v2/guide/
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
代码实现
前期准备
安装vue的插件
下载vue(推荐) 地址 :https://github.com/vuejs/vue
新建lib目录导入:
1.入门及插值表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app">
<!--
在网页加载的时候,网页会显示 {
{msg1}} ,直到加载完会突然变成 hello,Vue
-->
<p>{
{msg1}}</p>
<!--
v-cloak 在style标签下设置 display:none;
在网页加载的时候,网页不会显示任何东西 ,直到加载完会显示msg1属性的值 hello,Vue
-->
<p v-cloak>{
{msg1}}</p>
<!--
v-text 在网页加载的时候,网页不会显示任何东西 ,直到加载完会显示msg1属性的值 hello,Vue
-->
<p v-text = "msg1"/>
<!--
会显示 <h1>hello,h1</h1>,不能解析<h1>等标签
-->
<p v-text = "msg2"/>
<!--可以解析<h1>等标签-->
<p v-html = "msg2"/>
</div>
<!--引入Vue.js(script不可以自闭合)-->
<script src="../lib/vue.js"></script>
<script>
//使用Vue
var vm = new Vue({
//绑定元素
el:"#app",
//传递数据
data:{
/*
在写项目时这里的数据实际上是从后端取过来的
Controller
@responseBody
JSON
请求 ${content}/hello
*/
msg1:"Hello,Vue",
msg2:"<h1>hello,h1</h1>"
}
})
</script>
</body>
</html>
运行结果:
在console控制台输出vm.msg1=“hahahaha”,回车后结果如下:
2.绑定数据
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--
v-bind: 用于绑定html元素属性的值
可以简化为一个冒号 :
只要表达式合法,就能执行
变量 + 变量
变量 + 字符串常量等都可以
-->
<p>用户名:<input type="text" name="username" v-bind:value="msg1"></p>
<p>用户名:<input type="text" name="username" :value="msg1"></p>
<p>用户名:<input type="text" name="username" :value="msg1+'字符串'+msg1"></p>
<br>
<!--调用方法-->
<button onclick="f()">点击</button> <br><br>
<!-- v-on--方法调用,绑定方法 可以简化为 @ -->
<button v-on:click="m1()"