一 vue基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="mydiv">
{
{name}}--
{
{age}}--
{
{sex}}--
{
{hobby[0]}}--
{
{hobby[1]}}--
{
{obj.school}}--
{
{obj.addr}}
</div>
</body>
<script>
var app=new Vue({
el:"#mydiv",
data:{
name:"邓衡",
age:18,
sex:"男",
hobby:["看书","学java"],
obj:{school:"aaa",addr:"地球"}
}
});
</script>
</html>
1、el挂载点: el是用来设置Vue实例挂载(管理)的元素,vue会管理el选项命中的元素及其内部的后代元素。
2、data:数据对象:Vue中用到的数据定义在data中, data中可以写复杂类型的数据,渲染复杂类型数据时,遵守js的语法即可。
二 vue本地应用
用vue开发网页,获取元素,操作网页
1、 内容绑定,事件绑定
v-text:
设置标签的文本值(textContent),默认写法会替换全部内容,使用差值表达式{ {}}可以替换指定内容,内部支持写表达式.
v-html:
作用是:设置元素的innerHTML,内容中有html结构会被解析为标签, v-text指令无论内容是什么,只会解析为文本,解析文本使用v-text,需要解析html结构使用v-html.
v-on:
作用是:为元素绑定事件.事件名不需要写on, 指令可以简写为@,绑定的方法定义在methods属性中, 方法内部通过this关键字可以访问定义在data中数据
案例测试:计数器
data中定义数据:比如num
methods中添加两个方法:比如add(递增),sub(递减)
使用v-text将num设置给span标签
使用v-on将add,sub分别绑定给+,-按钮
累加的逻辑:小于10累加,否则提示
递减的逻辑:大于0递减,否则提示
主体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>计数器</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="app">
<div class="input-num">
<button @click="jian">
-
</button>
<span>{
{num}}</span>
<button @click="add">
+
</button>
</div>
<img src="http://qnaaa.zzaaa.net/aaajy/logo.png" alt="