vue入门到使用

亦凉 2022-01-27 11:53 196阅读 0赞

<!DOCTYPE html>

<head>

<title>Document</title>

// vue的使用是从对象开始的

</script>

</head>

<body>

<!--

vue是前端的一个函数库，一个框架，和jq实现的功能是一样的

每一个标签都使用scripty中vue创建一个对象，然后使用el和标签关联起来

然后通过胡子编程\{ \{ 属性 \}\}，来显示数据，

通过:href= 。。。来控制html属性

通过@click=等事件，绑定事件：

通过class=字典...，来设置控制class属性

\-->

var vm = new Vue(\{ //字典的格式，v要大写

// el:vue要控制的标签Element 的缩写

el:"\#app",

// data:存储vue的数据,字典的格式

data:\{

str:'hellow world'

\})

</script>

<hr>

<h3>vue控制html属性</h3>

\{ \{ str.split("").reverse().join("") \}\}

<p>

\{ \{ num+1 \}\}

</p>

<!--

v-XX： 表示指令，具备特殊功能的语法

： 化简写法,只写一个冒号即可

\-->

<a v-bind:href="url1">baodu </a>

<br>

<a :href="url1">taobao</a>

<br>

<br>

<br>

</div>

var vmdiv = new Vue(\{

el:'\#div1',

data:\{

str:"adadfaf",

num:22,

bool:true,

url1:"[https://www.baidu.com/][https_www.baidu.com]",

url2:"[https://www.taobao.com/][https_www.taobao.com]"

\},

// 封装函数，然后被调用

methods:\{

// 封装函数：函数名、匿名函数，其中a为形参，调用函数的时候，可以传递

fnAdd:function(a)\{

// this表示当前对象vmdic，

this.num += a

\})

</script>

<hr>

<h3>vue控制class属性:三种：字典，对象，列表</h3>

<!--

字典：\{类名：布尔类型，true表示添加，fals表示不添加\}

对象：key是真实的类名，value是布尔类型的取值

列表：每个元素都是类名

列表中有三元：看结果取类名

\-->

</div>

var div2 = new Vue(\{

el:"div2",

data:\{

bool1:true,

bool2:true2,

myobject:\{

class1:true,

class2:false

\},

myclass1:'leiming1',

myclass2:'leiming2'

\})

</script>

</body>

</html>

[https_www.baidu.com]: https://www.baidu.com/
[https_www.taobao.com]: https://www.taobao.com/

vue入门到使用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关黑马Vue2+3入门到实战教程

相关 Vue2+3入门到实战

相关 vue入门到就业之vue01--初识vue

相关 VUE—从入门到飞起（五）

相关 Nuxt入门到打包部署 Vue-SSR项目

相关 vue入门|ElementUI使用指南

相关 Vue从入门到开发之路

相关 vue入门使用

相关 vue入门到使用

相关 Vue笔记：使用node开发vue入门实例