I'm new to Vue.js, and I am having trouble in rendering vue data to html.
The html file
<!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>Vue</title>
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>{{ name }}</h1>
</div>
<script src="apps.js"></script>
</body>
</html>
Here's the JS file:
new VUE({
el: '#app',
data: {
name : 'Dhruv'
}
});
As comment, it is new Vue not new VUE.
Also, data needs to return an object.
new Vue({
el: '#app',
data: function () {
return {
name: 'Dhruv',
};
}
});
Related
I have installed tailwindcss using PostCSS. However it's not taking effect when i try to use it to style my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/dist/output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home Page</title>
</head>
Here is the output in tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
i changed the path to ../dist/output.css
<link href="../dist/output.css" rel="stylesheet">
it is not properly pointing to the right output.css file location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue js 01</title>
</head>
<body>
<div >
<h1 id="message" #click="update">{{message}}</h1>
</div>
<script src="https://unpkg.com/vue#next"></script>
<script>
let app = Vue.createApp({
data(){
return {
message:'hai welcome to vue 3!',
}
},
methods:{
update(){
this.message='Changed'
}
}
})
app.mount("#message")
</script>
</body>
</html>
why this is not working when click on h1 tag
when I am clicking this h1 tag it is not working. but if it is inside a <div> it will be work moving it id to this div
Here is the html code
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Getting Started: Serving Web Content</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import vue-resource -->
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app" :style="backgroudcolor"></div>
</body>
and I supposed to set background for the div whose id is 'app' ,and I've tried to bind a style object to its style, but it didn't at all..
here is the definition of the style object:
backgroudcolor: {
backgroundColor: 'red'
}
by the way, I put it in data.
Please help me, I'll be very grateful for that!
Use the right css property name background-color:
new Vue({
el: "#app",
data() {
return {
backgroudcolor: {
'background-color': 'red'
}
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app":style="backgroudcolor">
test
</div>
I am trying to redirect to home.html on click of a button in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/home.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Index</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="LoginCtrl">
<button ng-click="login()">Login</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
home.js
var VLogin = angular.module('starter', ['ionic']);
VLogin.controller('LoginCtrl', ['$scope','$location', function($scope, $location) {
$scope.login = function(){
$location.path("#/home.html");
};
}]);
And here is the hierarchy of both files
$location.path() is not working. Where am I going wrong? TIA.
take a look here: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
but the simple answer is that you should set up routes
$stateProvider.state('app', {
url: '',
templateUrl: 'app.html',
controller: 'AppCtrl'
}
}).state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
}
})
and then I would recommend using the $state provider to do something like this
login.controller('LoginCtrl', function($scope, $state) {
$state.go('app',{});
})
This is not the EXACT code, but an overview, I would recommed reading the link provided for additional information
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/topcoat-mobile-onsen-ios7.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/app.js"></script>
<script src="controller.js"></script>
<script src="data.js"></script>
<script src="master.js"></script>
<script src="detail.js"></script>
</head>
<body>
<ons-screen>
<ons-navigator title="Page 1">
<ons-page class="center">
<div ng-controller="MasterController">
<ons-list>
<ons-list-item
class="topcoat-list__item--tappable topcoat-list__item__line-height"
ng-repeat="item in items"
ng-click="showDetail($index)">
<ons-row>
<ons-col size="10">
<ons-icon
icon="{{item.icon}}"
fixed-width="true">
</ons-icon>
</ons-col>
<ons-col class="left">
{{item.title}}
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-navigator>
</ons-screen>
</body>
</html>
here is js file
var myApp = angular.module('myApp');
myApp.factory('Data', function(){
var data = {};
data.items = [
{
title: 'aducational',
icon: 'comments-o',
description: 'Item 1 Description',
href: 'tp.html'
},
{
title: 'dance',
icon: 'desktop',
description: 'Item 2 Description',
href: 'dance.html'
},
{
title: 'singing',
icon: 'heart-o',
description: 'Item 3 Description',
href: 'tp.html'
}
];
return data;
});
i am not able reach dance.html,where tp.html working properly.when i change dance to tp it works properly.once i click on dance after that i am not able to get tp also :(.where my dance.html working properly alone